CSS Push Div to bottom of page
请查看该链接，我想要相反：当内容溢出到滚动条时，我希望我的页脚始终位于页面的完整底部，如Stack Overflow。
我有一个与id="footer"和这个CSS的div：
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
但它所做的只是转到视口的底部，即使向下滚动也会停留在那里，因此它不再位于底部。
图片：
对不起，如果不澄清，我不希望它被修复，只是因为它在所有内容的实际底部。
这正是position: fixed的设计目的：
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
我只想补充一点 - 其他大多数答案对我来说都很好;然而，它需要很长时间才能让它们正常工作！
这是因为设置height: 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;
}
......因为“持有人”会直接从“身体”中获取它的高度。
感谢我的头部疼痛，他的答案是我最终开始工作的答案！
然而。如果您的html更嵌套（因为它只是整页的一个元素，或者它在某个列中，等等），那么您需要确保每个包含的元素也在div上设置了height: 100%。否则，“身体”和“持有者”之间的高度信息将丢失。
例如。以下，我已经为每个div添加了“全高”类，以确保高度一直到我们的标题/正文/页脚元素：
<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: 100%;
}
这解决了我的问题！
不幸的是，你不能通过添加一些额外的HTML并让一块CSS依赖另一块来做到这一点。
HTML
首先，你需要将你的header，footer和#body包装成一个#holder div：
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
然后将height: 100%设置为html和body（实际身体，而不是你的#body div），以确保您可以将最小高度设置为子元素的百分比。
现在在min-height: 100% div上设置#holder，以便填充屏幕内容并使用position: absolute将页脚放在#holder div的底部。
不幸的是，你必须将padding-bottom应用于与#body高度相同的footer div，以确保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/
刚刚找到另一个解决方案，如上例所示，我有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来查看页脚
我意识到它说不要用它来“回答其他答案”，但遗憾的是我没有足够的代表在适当的答案（！）上添加评论但是......
如果您在asp.net中遇到“My Head Hurts”的答案 - 您需要在主生成的FORM标签以及HTML和BODY标签上添加'height：100％'以使其正常工作。
你没有关闭你的;位置后：绝对。否则你的上面的代码将完美地工作！
#footer {
position:absolute;
bottom:30px;
width:100%;
}
我会评论，如果我可以，但我还没有权限，所以我会发布一个提示作为答案，在一些Android设备上的意外行为：
位置：固定仅适用于Android 2.1至2.3，使用以下元标记：
<meta name="viewport" content="width=device-width, user-scalable=no">.
这是一个使用viewport命令的直观解决方案，它只是将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
如果你有一个固定的高度页脚（例如712px）你可以使用js这样做：
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
我通过将所有主要内容放在一个额外的div标签（id =“outer”）中解决了类似的问题。然后，我在最后一个“外部”div标签之外移动了id =“footer”的div标签。我用CSS来指定“外部”的高度，并指定“页脚”的宽度和高度。我还使用CSS将“footer”的margin-left和margin-right指定为auto。结果是页脚牢牢地坐在我的页面底部并且也随页面滚动（尽管它仍然出现在“外部”div中，但很高兴在主要的“内容”div之外。这似乎很奇怪，但它是我想要的地方）。