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

Posted 2023-03-05

【中文标题】为啥不使用位置：固定为“粘性”页脚？

【英文标题】：Why not used position:fixed for a "sticky" footer?为什么不使用位置：固定为“粘性”页脚？

【发布时间】：2011-01-17 04:23:10

【问题描述】：

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

当#footerposition:fixed; bottom:0; 可以满足要求时，为什么这些人还要为粘性页脚制作模板？

编辑：

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

【问题讨论】：

粘性页脚是在内容不是很高时粘在窗口底部的页脚，但当内容高于窗口高度时，页脚的行为就像普通页脚一样，被推动不低于内容，因为固定位置会给你，漂浮在内容之上。可能是 position:fixed 是您想要的效果，但这不是粘性页脚尝试实现的效果。就个人而言，我认为为技术 sodul 发布的演示页面具有高示例页面和短示例页面，以更好地说明效果。

@wheresrhys - 你有一个很好的观点，在这种情况下，需要重新考虑整个线程。 position: absolute; bottom: 0; 的粘性页脚怎么样？

这也不起作用，因为它会与内容的底部重叠（除非您添加填充，但是这与内容的高度 100% 相结合会导致永久滚动条出现）。为了阻止它这样做，我认为您需要实施您链接到的解决方案之一。

【参考方案1】：

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

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

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

---

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

【讨论】：

这篇文章中的两个链接都失效了。

@Script47 我明白了。我将尝试复活或重定向到 mcemperor.nl 的链接，我还将替换 Ryan 的粘性页脚的链接。

你可以检查一下 Internet Archive 是否有任何东西？我很感激你更新了这么老的答案。

@Script47 好点，我找到了一个快照，它实际上包含了我上次看到它时所写的内容。