Question

我正试图围绕CSS定位指南。我试图弄清楚如何制作粘性页脚，但是当主要内容区域无法再浓缩时，它会停止粘性。我在这里谈论的一个例子可以在http://ryanfait.com/sticky-footer/找到。有人可以向我解释为什么页脚不会粘，特别是CSS属性会导致这种情况发生吗？对我来说，当我看到CSS时，看起来页脚应该始终保持粘滞到浏览器窗口的底部，但这不是这里的情况。为什么呢？

感谢您的帮助。

Answer 1

试试这个。 http://www.cssstickyfooter.com/（链接不再有效）

它类似于Ryan的那个，但是从内存来看，我觉得我运气好了（虽然两者非常相似）。

Answer 2

你必须在包装器之外声明页脚，并为页脚和margin-top提供一些height -(footer-height)px

<div id="wrapper">
  ---
 ------
</div>
<div id="footer">
</div>

# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}

Answer 3

以下是我使用相当一致的布局的简短摘要，作为需要粘性页脚的项目的基础。不知道我最初从哪里得到了所有的代码，但它已经拼凑了很长一段时间。

http://jsfiddle.net/biznuge/thbuf/8/

你应该能够从小提琴中看到你需要一个'#container'元素来包装整个页面。这给你100％的高度（注意css中存在的hack），并允许这个'container'元素的子元素导出相对于它的高度或位置。

这种方法的缺陷是：

您需要在'#main'底部提供一些填充/边距元素使得页脚比自然更远地移位会，所以需要至少知道你的页脚的广泛范围身高应该是。
IE似乎没有（＆lt; = IE8未测试9）识别浏览器调整大小如果您只调整浏览器底部边缘的事件，那么在特殊情况下，粘性会失效，直到水平 resize也作为一个活动呈现。
如果你想要一个固定宽度的布局，你应该放置它约束不在'#container'元素上，而是在'#page'上元素，也许在'#footer'下引入额外的元素在那里提供任何宽度限制。

祝你好运！

CSS自动高度和粘性页脚

3 个答案: