我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。
我有一个div id="footer"和下面的CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。
我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。
图片:
当前回答
这是一个直观的解决方案，使用viewport命令将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
其他回答
如果我可以的话，我会评论，但我还没有权限，所以我会张贴一个提示作为答案，对于一些android设备上的意外行为:
定位:固定只适用于Android 2.1到2.3使用以下元标签:
<meta name="viewport" content="width=device-width, user-scalable=no">.
看到http://caniuse.com/搜索=位置
你没有合上你的;后位:绝对。 否则，您上面的代码将完美地工作!
#footer {
position:absolute;
bottom:30px;
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%;
}
这解决了我的问题!
我在页脚上打了一个边距:auto，它做到了!我在这里评论，只是以防它可以帮助任何未来的游客。
不幸的是，如果不添加一点额外的HTML，让一个CSS依赖另一个CSS，就无法做到这一点。
HTML
首先，你需要把你的页眉，页脚和#body包装成#holder div:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
然后将height: 100%设置为html和body(实际的身体，而不是您的#body div)，以确保您可以设置最小高度作为子元素的百分比。
现在在#holder div上设置min-height: 100%，这样它就填充了屏幕的内容，并使用position: absolute位于#holder div底部的页脚。
不幸的是，你必须对与页脚高度相同的#body div应用padding-bottom，以确保页脚不位于任何内容之上:
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/
