1

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

谢谢您的帮助。

4

3 回答 3

1

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

它与 Ryan 的相似，但从记忆中，我认为我的运气更好（尽管两者非常相似）。

于 2011-08-03T05:20:41.850 回答
0

您必须在包装器之外声明页脚，并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;
}
于 2011-08-03T04:39:07.750 回答
0

这是我相当一致地用作需要粘性页脚的项目的基础的布局的简要摘要。不知道我最初是从哪里得到所有代码的，但它是在很长一段时间内拼凑起来的。

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

您应该能够从小提琴中看到您需要一个“#container”元素来包裹整个页面。这为您提供了 100% 的高度（注意 ie 存在于 css 中的 hack），并允许此“容器”元素的子元素导出高度或相对于它的位置。

这种方法的缺陷是：

  • 您需要在 '#main' 元素的底部提供一些填充/边距，以便页脚比它自然会移动得更远，因此需要至少知道您的页脚高度应该是多少。
  • 如果您只调整浏览器底部边缘的大小，IE 似乎（<=IE8 未测试 9）无法识别浏览器调整大小事件，因此在这种特殊情况下，粘性会失败，直到水平调整大小也作为事件呈现。
  • 如果您想要布局的固定宽度，则不应将此约束放置在“#container”元素上，而应放在“#page”元素上，并可能在“#footer”下方引入额外元素以提供任何宽度约束。

祝你好运！

于 2011-08-03T11:23:37.300 回答