我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。
我有一个div id="footer"和下面的CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。
我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。
图片:
当前回答
我意识到它说不要用这个来“回复其他答案”，但不幸的是，我没有足够的代表在适当的答案上添加评论(!)，但是……
如果你在asp.net中遇到来自“My Head Hurts”的答案的问题，你需要添加“height: 100%”到主要生成的FORM标签以及HTML和BODY标签中，以使其工作。
其他回答
我只是想补充一点，大多数其他答案对我来说都很好;然而，花了很长时间让他们工作!
这是因为设置高度: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%;
}
这解决了我的问题!
这正是定位:fixed的设计目的:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
这是小提琴:http://jsfiddle.net/uw8f9/
刚刚为我制定了另一个解决方案，如上面的例子有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查看页脚
砰砰作响
你没有合上你的;后位:绝对。 否则，您上面的代码将完美地工作!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
我在页脚上打了一个边距:auto，它做到了!我在这里评论，只是以防它可以帮助任何未来的游客。
