即使有滚动条,也让div始终保持在页面内容的底部
H B*_*amy 241 css positioning css-position footer
请查看该链接,我想要相反:当内容溢出到滚动条时,我希望我的页脚始终位于页面的完整底部,如Stack Overflow.
我有一个div id="footer"和这个CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
但它所做的只是转到视口的底部,即使向下滚动也会停留在那里,因此它不再位于底部.
图片: 
对不起,如果不澄清,我不希望它被修复,只是因为它在所有内容的实际底部.
Jos*_*ber 508
这正是position: fixed为以下目的而设计的:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
这是小提琴:http://jsfiddle.net/uw8f9/
- 对于90%的案例,该解决方案并不好.如果您重新调整窗口大小,您的页脚将覆盖其他内容,并且不会在内容结尾处停止 (63认同)
- @aroth那是因为他们是两个完全不同的解决方案.此解决方案将始终将页脚保持在屏幕可视区域的底部.替代解决方案将页脚保持在屏幕底部或页面底部,具体取决于哪个更大 - 这是提问者要求的. (10认同)
- @MyHeadHurts - 你说得对.在回答之后,我意识到这不是OP想要的,但我把它留给了寻找简单固定页脚的人.从评论(和投票)来看,似乎很多人都在努力解决这个基本的CSS功能. (6认同)
My *_*rts 181
不幸的是,你不能通过添加一些额外的HTML并让一块CSS依赖另一块来做到这一点.
HTML
首先,你需要包装你的header,footer并#body进入#holderdiv:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
然后设置height: 100%为html和body(实际的身体,而不是你的#bodydiv),以确保您可以将最小高度设置为子元素的百分比.
现在设置min-height: 100%上#holder,使其充满屏幕的内容和使用DIV position: absolute在底部坐在页脚#holder股利.
不幸的是,你必须申请与高度相同padding-bottom的#bodydiv,footer以确保footer它不会高于任何内容:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
工作示例,简短的身体:http://jsfiddle.net/ELUGc/
工作实例,长体:http://jsfiddle.net/ELUGc/1/
- @sTACKoVERFLOW - 如果你没有指定`width`**或者同时指定'`left`和`right`,那么这些值将设置为`auto`,元素将换行以适应其内容.指定`width:100%`**或**`left:0`和`right:0`确保绝对定位的元素占据容器元素的整个宽度 (4认同)
Ano*_*ous 13
刚刚找到另一个解决方案,如上例所示,我有bug(某处错误).所选答案的变化.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
对于HTML布局
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
那么这种方式不支持旧浏览器,但旧浏览器可以接受滚动下载30px来查看页脚
- 投票不足 - 没有吸收者,没有解释"虫子". (6认同)
小智 7
你没有关闭你的 ; 后位置：绝对。否则你的上面的代码会完美地工作！
#footer {
position:absolute;
bottom:30px;
width:100%;
}
我意识到它说不要用它来"回答其他答案",但遗憾的是我没有足够的代表在适当的答案(!)上添加评论但是......
如果您在asp.net中遇到"My Head Hurts"答案时遇到问题 - 您需要在主生成的FORM标签以及HTML和BODY标签上添加"height:100%"以使其正常工作.
如果可以的话，我会发表评论，但我还没有权限，所以我将发布一个提示作为答案，以应对某些 Android 设备上的意外行为：
位置：通过使用以下元标记修复仅适用于 Android 2.1 至 2.3：
<meta name="viewport" content="width=device-width, user-scalable=no">.
请参阅http://caniuse.com/#search=position