CSS Push Div to bottom of page
请看那个链接，我想要相反：当内容溢出到滚动条时，我希望我的页脚总是在页面的完整底部，就像 Stack Overflow。
我有一个带有 id="footer" 的 div 和这个 CSS：
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
但它所做的只是转到视口的底部，即使向下滚动也会停留在那里，因此它不再位于底部。
图片：
对不起，如果没有澄清，我不希望它被修复，只是让它在所有内容的实际底部。
【问题讨论】：
position:fixed，虽然这并不是最好的方法
标签： css positioning css-position footer
这正是 position: fixed 的设计目的：
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
【讨论】：
fixed 页脚下方滚动。这对我来说已经足够了。当然，我可以看到 very large 页脚（如 stackoverflow 上的页脚）在 fixed 方法中效果不佳，但对于基本的单行页脚，我认为这种方法效果很好。
不幸的是，如果不添加一些额外的 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）以确保您可以将最小高度设置为子元素的百分比。
现在在#holder div 上设置min-height: 100%，使其填充屏幕内容并使用position: absolute 将页脚放在#holder div 的底部。
很遗憾，您必须将padding-bottom 应用于与footer 高度相同的#body 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/
【讨论】：
width 或两者 left 和right 然后值设置为auto 并且元素将换行以适应其内容。指定width: 100% 或 left: 0 和right:0 确保绝对定位的元素占据容器元素的整个宽度
height=100%，包括<form> 元素。
刚刚为我制定了另一个解决方案，如上例有错误（某处错误）。与所选答案不同。
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 中遇到“我的头疼”的答案时遇到问题 - 您需要在生成的主要 FORM 标记以及 HTML 和 BODY 标记中添加“height : 100%”，以便这样做工作。
【讨论】：
如果可以的话，我会发表评论，但我还没有权限，所以我会发布一个提示作为答案，以解决某些 Android 设备上的意外行为：
位置：已修复，仅适用于 Android 2.1 至 2.3，使用以下元标记：
<meta name="viewport" content="width=device-width, user-scalable=no">.
【讨论】：
这是一个使用视口命令的直观解决方案，只需将最小高度设置为视口高度减去页脚高度。
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") 中解决了类似的问题。然后，我将 id="footer" 的 div 标签移到了最后一个“外部”div 标签之外。 我使用 CSS 来指定“outer”的高度并指定“footer”的宽度和高度。我还使用 CSS 将“页脚”的 margin-left 和 margin-right 指定为 auto。结果是页脚牢牢地位于我的页面底部并与页面一起滚动（尽管它仍然出现在“外部”div 内，但很高兴在主“内容”div 之外。这看起来很奇怪，但它我想要的地方）。
【讨论】：
你没有关闭你的 ;后位置：绝对。 否则你上面的代码会完美运行！
#footer {
position:absolute;
bottom:30px;
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%。否则，“body”和“holder”之间的身高信息会丢失。
例如下面，我在每个 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%;
}
这解决了我的问题！
【讨论】：
使用固定底部引导类
<div id="footer" class="fixed-bottom w-100">
【讨论】：
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
【讨论】：