使div始终停留在页面内容的底部，即使有滚动条也是如此
CSS推Div到页面底部
请看这个链接，我想要的是相反的：当内容溢出到滚动条，我希望我的页脚总是在整个页面的底部，如堆栈溢出。
我有一个id="footer"的div和这个CSS：
#footer { position: absolute; bottom: 30px; width: 100%; }
但是它所做的只是到视口的底部，即使向下滚动，也停留在那里，所以它不再处于底部。
图片： 
对不起，如果没有澄清，我不希望它是固定的，只是为了在所有的内容的实际底部。
这正是什么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/
刚刚解决了上面的例子有另一个解决scheme有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>
那么这种方式不支持旧的浏览器，但它可以接受的旧浏览器scrolldown 30px查看页脚。
我意识到它说，不要用这个'回答其他答案'，但不幸的是我没有足够的代表添加评论到适当的答案（！），但…
如果您在asp.net中遇到了“My Head Hurts”问题的答案，那么您需要将“height：100％”添加到主要生成的FORM标记以及HTML和BODY标记中，以使其生效。
我会评论如果我可以，但我没有权限，所以我会发布一个提示作为一个答案，在一些Android设备上的意外的行为：
位置：固定只能在Android 2.1到2.3之间使用以下元标记：
<meta name="viewport" content="width=device-width, user-scalable=no">.
这是一个直观的解决scheme，使用视口命令，只是设置视口高度减去页脚高度的最小高度。
html,body{ height: 100% } #nonFooter{ min-height: calc(100vh - 30px) } #footer { height:30px; margin: 0; clear: both; width:100%; }
你没有closures你的; 后立场：绝对。 否则，你的上面的代码将完美的工作！
#footer { position:absolute; bottom:30px; 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来指定页脚的margin-left和margin-right作为auto。 其结果是页脚牢牢地坐在我的页面底部，并与页面滚动（虽然，它仍然出现在“外部”div内，但高兴地在主“内容”div之外，这似乎很奇怪，但它我想要的地方）。
我只是想补充 – 大部分的其他答案对我来说工作得很好; 然而，让他们工作需要很长时间！
这是因为设置height: 100%只能提取父母的身高！
所以，如果你的整个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更多的嵌套（因为它只是整个页面的一个元素，或者它是在一个特定的列等），那么你需要确保每个包含元素也有height: 100%在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%; }
这解决了我的问题！
