我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。
我有一个div id="footer"和下面的CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。
我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。
图片:
当前回答
如果我可以的话，我会评论，但我还没有权限，所以我会张贴一个提示作为答案，对于一些android设备上的意外行为:
定位:固定只适用于Android 2.1到2.3使用以下元标签:
<meta name="viewport" content="width=device-width, user-scalable=no">.
看到http://caniuse.com/搜索=位置
其他回答
我意识到它说不要用这个来“回复其他答案”，但不幸的是，我没有足够的代表在适当的答案上添加评论(!)，但是……
如果你在asp.net中遇到来自“My Head Hurts”的答案的问题，你需要添加“height: 100%”到主要生成的FORM标签以及HTML和BODY标签中，以使其工作。
刚刚为我制定了另一个解决方案，如上面的例子有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查看页脚
砰砰作响
我在页脚上打了一个边距:auto，它做到了!我在这里评论，只是以防它可以帮助任何未来的游客。
这是一个直观的解决方案，使用viewport命令将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
不幸的是，如果不添加一点额外的HTML，让一个CSS依赖另一个CSS，就无法做到这一点。
HTML
首先，你需要把你的页眉，页脚和#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底部的页脚。
不幸的是，你必须对与页脚高度相同的#body div应用padding-bottom，以确保页脚不位于任何内容之上:
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/
