为什么不使用位置：固定为“粘性”页脚？

Question

我看过粘性页脚的Ryan Fait's方法以及一个here和here。

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

编辑：

我将补充一点，使用position: fixed;作为页脚会导致margin: auto;以（至少）某些浏览器为中心，从而创建了对包装器标记的需求。我上面提到的方法的部分问题是额外的标签，这些标签令人困惑，语法不正确（对于“HTML纯粹主义者”）并且它会占用带宽。但是，在我看来，在页脚周围的单个包装器仍然比一个完整的页面模板更好。并且，“我的”方式仍然更加简单，占用的带宽更少。

Answer 1

使用position: fixed和Ryan Fait's method ¹ 之间的区别非常重要。

使用position: fixed时，页脚始终可见，这不是粘性页脚尝试执行的操作。
如果内容长于视口高度，粘性页脚的含义是保持粘在底部除之外。在那个的情况下，粘性页脚将像一个普通的页脚一样，出现在页面内容的正下方。

粘性页脚的

Here you can see the effect。在“结果”窗口中，您会看到页脚停留在页面底部。点击“添加内容”按钮添加内容，然后您会看到页脚向下移动以保持低于内容。

---

^{1。这是Wayback Machine 2013年1月10日的快照，因为Ryan的网站本身不再包含原始帖子。}

Answer 2

好的＆＃34;坚持＆＃34;和我在这个答案:) 您在另一个答案中提到的方法与粘性页脚方法之间的唯一区别是，粘性页脚仅显示在所有主页内容下方，并且从不覆盖页面内容。

所以，要解决这个问题，你要做的就是在一个简单的div包装器中创建主页面内容，然后设置一个位置：relative;顶部：0px;左：0px;并使z-index大于页面的原始值。包装页面内容的div产生的唯一变化是它被放置在原始页面元素之上，因为z-index更高。然后，将页脚放在html中，其位置为：fixed; bottom：0px;并使z-index小于页面内容和TA-DA！页脚从不出现在页面内容之上。为了使这项工作，页面内容必须具有不透明的背景来覆盖页脚。

一个注意事项：这与＆＃34;粘性＆＃34;之间仍然存在细微差别。页脚 - 粘性页脚不会滑动＆＃34;滚动页面底部的内容，以及向上滚动时的上述方法。但是，由于这只是一个小的UI差异，我认为上述方法在简单性和性能方面优于粘性页脚。并且，有些人可能会认为当页脚滑出时更好。如上述方法。

我认为这应该完全回答你的问题。