我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。
我有一个div id="footer"和下面的CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。
我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。
图片:
当前回答
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
其他回答
我只是想补充一点，大多数其他答案对我来说都很好;然而，花了很长时间让他们工作!
这是因为设置高度:100%只选取父div的高度!
所以如果你的整个html(在主体内部)看起来像下面这样:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
那么以下就可以了:
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;
}
.．.因为“holder”将直接从“body”中获取它的高度。
向My Head Hurts致敬，他的答案是我最终开始工作的答案!
然而。如果你的html更嵌套(因为它只是整个页面的一个元素，或者它在某个列中，等等)，那么你需要确保每个包含元素也有高度:100%设置在div上。否则，高度的信息将丢失在“body”和“holder”之间。
例如下面，我在每个div中添加了“full height”类，以确保高度一直向下到我们的header/body/footer元素:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
记住在css中的full-height类中设置height:
#full-height{
height: 100%;
}
这解决了我的问题!
这是一个直观的解决方案，使用viewport命令将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
我在页脚上打了一个边距:auto，它做到了!我在这里评论，只是以防它可以帮助任何未来的游客。
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
如果我可以的话，我会评论，但我还没有权限，所以我会张贴一个提示作为答案，对于一些android设备上的意外行为:
定位:固定只适用于Android 2.1到2.3使用以下元标签:
<meta name="viewport" content="width=device-width, user-scalable=no">.
看到http://caniuse.com/搜索=位置
