请在此处查看 jsFiddle:
http://jsfiddle.net/sheriffderek/y7fPK/1/
html, body {
height: 100%;
}
.page-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}
还有一个缓冲区和页脚...... fiddle 会更有意义。
粘性页脚运行良好，但向下滚动时正文未扩展以包含内容。
对比。 (向下滚动时)
看到这个橘子了吗？红色是正文，HTML 是橙色……它没有超出视口(viewport)。
如果我从 body 中删除 height: 100% ，这就解决了这个问题 - 但是页脚会跳到内容的末尾。
看起来 100% 的高度只是视口(viewport)的高度。这是有道理的...但我希望正文与 HTML 一样大...有什么想法吗？？？
感谢您的宝贵时间。
最佳答案
隐藏在包装器上的一个简单溢出似乎对我有用。
这是一支笔。
http://codepen.io/sheriffderek/pen/DiewF
HTML:
<html><body>
<div class="wrapper">
<header>
HEADER
</header>
<section class="main-content">
MAIN CONTENT
</section> <!-- end .main-content -->
<div class="footer-buffer">BUFFER</div>
</div><!-- end .wrapper -->
<footer>
FOOTER
</footer>
</body></html>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* for IE 6 */
height: 100%; /* for IE 6 */
margin: 0 auto -4em;
/* new addition */
overflow: hidden; /* this seems to do the trick */
/* remove this to see the problem */
}
footer, .footer-buffer {
height: 4em;
}
关于html - 正文不包含内容/与加权页脚结合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13038537/