16

我已经看过Ryan Fait 的粘性页脚方法以及这里这里的一种。

为什么这些人在#footer{position:fixed; bottom:0;}足够的时候为粘性页脚制作模板?

编辑:

我将补充一点,使用position: fixed;页脚确实会margin: auto;在(至少)某些浏览器中打破居中,从而产生对包装器标签的需求。我对上述方法的部分问题是额外的标签令人困惑,语法不正确(对于“HTML纯粹主义者”)并且它占用带宽。但是,在我看来,页脚周围的单个包装器仍然比必须开始使用的整个混乱的页面模板更好。而且,“我的”方式更加直接,占用的带宽更少。

4

1 回答 1

11

position: fixed使用和Ryan Fait 的方法1之间的区别是非常基本的。

使用position: fixed时,页脚始终可见,这不是粘性页脚试图做的事情。
粘性页脚的含义是保持粘在底部,除非内容长于视口高度。在这种情况下,粘性页脚将像普通页脚一样出现在页面内容的正下方。

在这里您可以看到粘性页脚的效果。在结果窗口中,您会看到页脚位于页面底部。单击“添加内容”按钮添加内容,然后您会看到页脚向下移动以保持在内容下方。


1. 这是来自 Wayback Machine 的 2013 年 1 月 10 日的快照,因为 Ryan 的网站本身不再包含原始帖子。

于 2012-06-14T19:27:28.527 回答