即使有滚动条，也让 div 始终停留在页面内容的底部
CSS Push Div to bottom of page
请看那个链接，我想要相反的：当内容溢出到滚动条时，我希望我的页脚总是在页面的底部，就像 Stack Overflow 一样。
我有一个带有 id="footer" 的 div 和这个 CSS：
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
但它所做的只是转到视口的底部，即使向下滚动也会停留在那里，因此它不再位于底部。
https://i.stack.imgur.com/ahmtx.png
抱歉，如果没有澄清，我不希望它被修复，只是让它位于所有内容的实际底部。
position:fixed ，尽管这并不是最好的方法
这正是 position: fixed 的设计目的：
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
这是小提琴：http://jsfiddle.net/uw8f9/
不幸的是，如果不添加一些额外的 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 确保绝对定位的元素占据容器元素的整个宽度
<form> 元素）上指定 height=100%。
刚刚为我制定了另一个解决方案，如上面的示例有错误（某处错误）。与所选答案不同。
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%”才能使其正常工作。
你没有关闭你的 ;后位置：绝对。否则，您上面的代码将完美运行！
#footer {
position:absolute;
bottom:30px;
width:100%;
}
如果可以的话，我会发表评论，但我还没有权限，所以我会发布一个提示作为答案，以解决某些 android 设备上的意外行为：
位置：已修复，仅适用于 Android 2.1 至 2.3，使用以下元标记：
<meta name="viewport" content="width=device-width, user-scalable=no">.
见http://caniuse.com/#search=position
这是一个使用视口命令的直观解决方案，只需将最小高度设置为视口高度减去页脚高度。
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%;
我通过将所有主要内容放在一个额外的 div 标签 (id="outer") 中解决了类似的问题。然后，我将 id="footer" 的 div 标签移到了最后一个“外部”div 标签之外。我使用 CSS 来指定“outer”的高度并指定“footer”的宽度和高度。我还使用 CSS 将“页脚”的 margin-left 和 margin-right 指定为 auto。结果是页脚牢牢地位于我的页面底部并与页面一起滚动（尽管它仍然出现在“外部”div 内，但很高兴出现在主“内容”div 之外。这看起来很奇怪，但它我想要的地方）。
我只想补充一下——其他大多数答案对我来说都很好；但是，让它们工作需要很长时间！
这是因为设置 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%;
}
这解决了我的问题！
如果您有一个固定高度的页脚（例如 712px），您可以使用 js 执行此操作，如下所示：
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
使用固定底部引导类
<div id="footer" class="fixed-bottom w-100">
fixed页脚下方滚动。这对我来说已经足够了。当然，我可以看到 very large 页脚（如 stackoverflow 上的页脚）无法很好地与fixed方法配合使用，但对于基本的单行页脚，我认为这种方法效果很好。