即使有滚动条，也使div始终保持在页面内容的底部
请查看该链接，我希望得到相反的结果：当内容溢出到滚动条时，我希望页脚始终位于页面的整个底部，例如Stack Overflow。
我有一个div id="footer"和这个CSS：
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
但是它所做的只是进入视口的底部，即使向下滚动也仍停留在视口的底部，因此它不再位于底部。
图片： 
很抱歉，如果没有弄清楚，我不希望将其修复，仅因为它位于所有内容的实际底部即可。
第3412篇《即使有滚动条，也使div始终保持在页面内容的底部》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
如果您有固定高度的页脚（例如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">
通过将我的所有主要内容放在一个额外的div标签（id =“ outer”）中，我已经解决了一个类似的问题。然后，我将id为“ footer”的div标签移到了最后一个“外部” div标签之外。我使用CSS来指定“外部”的高度，并指定“页脚”的宽度和高度。我还使用CSS将“页脚”的左边距和右边距指定为自动。结果是页脚牢牢地位于我页面的底部，并且也随页面一起滚动（尽管它仍然出现在“外部” div内，但是很高兴在主要“内容” div之外。这似乎很奇怪，但是我想要的地方）。
这是使用viewport命令的直观解决方案，该命令仅将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
如果可以的话，我会发表评论，但是我还没有权限，因此我将在某些android设备上发布提示作为答案，以防意外行为：
位置：通过使用以下元标记，已修复仅在Android 2.1至2.3中有效。
<meta name="viewport" content="width=device-width, user-scalable=no">.
你没有关门; 后位置：绝对。否则，您上面的代码会完美地工作！
#footer {
position:absolute;
bottom:30px;
width:100%;
}
我意识到它说不要用它来“响应其他答案”，但是不幸的是我没有足够的代表在适当的答案上添加评论（！），但是...
如果您在asp.net中遇到“我的头部受伤”的答案时遇到问题-您需要在主要生成的FORM标签以及HTML和BODY标签中添加“ height：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即可查看页脚
不幸的是，您不能仅添加一些额外的HTML并让一个CSS依赖另一个CSS。
的HTML
首先你需要用你的header，footer并且#body到#holderDIV：
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
的CSS
然后设置height: 100%为html和body（实际主体，不是您的#bodydiv），以确保您可以将最小高度设置为子元素的百分比。
Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.
Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:
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;
}
Working example, short body: http://jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
这正是position: fixed为以下目的而设计的：
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
这是小提琴：http : //jsfiddle.net/uw8f9/
相似问题
问题类别
我只想补充一下-其他大多数答案对我来说效果很好；但是，花了很长时间才让他们工作！
这是因为设置
height: 100%仅会拾取父div的高度！因此，如果您的整个html（在主体内部）如下所示：
那么以下内容就可以了：
...因为“持有人”将直接从“身体”获得身高。
感谢我的头疼，我的答案就是我最终开始工作！
然而。如果您的html嵌套较多（因为它只是整个页面的一个元素，或者位于某个列中，等等），那么您需要确保每个包含元素
height: 100%的div上都已设置。否则，关于高度的信息将在“身体”和“持有人”之间丢失。例如，在下面的示例中，我向每个div添加了“ full height”类，以确保高度一直下降到我们的header / body / footer元素中：
并记住在CSS中的全高类上设置高度：
那解决了我的问题！