我希望实现以下问题的相反行为: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%;
}
其他回答
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
如果你有一个固定高度的页脚(例如712px)，你可以用js这样做:
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
我意识到它说不要用这个来“回复其他答案”，但不幸的是，我没有足够的代表在适当的答案上添加评论(!)，但是……
如果你在asp.net中遇到来自“My Head Hurts”的答案的问题，你需要添加“height: 100%”到主要生成的FORM标签以及HTML和BODY标签中，以使其工作。
你没有合上你的;后位:绝对。 否则，您上面的代码将完美地工作!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
刚刚为我制定了另一个解决方案，如上面的例子有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查看页脚
砰砰作响
