我试图让我的页脚（只是一个带有一行文本的div）位于屏幕底部（如果内容没有一直到达底部），或者位于内容的底部（如果内容需要滚动条。如果内容不需要滚动条，它可以完美工作，但是当内容太长时，页脚仍然位于同一位置，位于内容的正上方。
我的基本 div 结构是：
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
我相应的CSS（稍微精简一下）：
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
最简单的解决方案是使用min-height on the <html>标记并定位<footer> with position:absolute;
Demo: jsfiddle http://jsfiddle.net/webtiki/h9mHc/和SO片段：
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
