我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。
我有一个div id="footer"和下面的CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。
我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。
图片:
当前回答
你没有合上你的;后位:绝对。 否则，您上面的代码将完美地工作!
#footer {
position:absolute;
bottom:30px;
width: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/搜索=位置
不幸的是，如果不添加一点额外的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/
I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag. I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).
刚刚为我制定了另一个解决方案，如上面的例子有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查看页脚
砰砰作响
