如今，听到“粘性页脚”，我想大多数人都会想到position: sticky的情况，其中页脚元素在某个父元素的滚动上下文中显示为固定在屏幕上。
这与我在这里讨论的内容不完全相同。“粘性页脚”是position: sticky出现之前的 UI 概念，它们的含义略有不同。其理念是，即使页面内容不足以将其推到那里，它们也**会粘贴在屏幕底部**。但如果内容足够多，它们就会很乐意被向下推。
我们过去几年介绍了五种实现此目的的方法，其中包括一些比较现代的技术，包括calc()、弹性盒和 CSS 网格。
第六位挑战者出现了！读者 Sílvio Rosa 提出以下方法
（可能最容易在中等大小的桌面屏幕上查看，因为粘性页脚在这里最有用。）
它基本上是这样的
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}我喜欢它的一点是，它不需要为非页脚内容创建任何特殊的额外包装器。
它也有些令人费解。当我看到top: 100vh;时，我想嗯，这行不通，因为它会将页脚推到可视区域之外。但这就是巧妙之处。无论页脚大小如何，它都会这样做（没有魔法数字），然后粘性定位会将其“吸回”以粘贴在底部边缘。但它永远不会与内容重叠，因此很乐意被推到内容下方，这是粘性页脚模式的核心原则。
酷！ :)
我发送了电子邮件，添加了书签并将此保存到我的笔记中，以便在我的下一个项目中不要忘记使用它。非常棒！
这真是简洁优雅……
在我看来，使用 js 来修改 css 是没有意义的。这就是为什么我们有网格、弹性盒来使其尽可能简单；)
你的评论错过了这篇文章的重点。没有使用 javascript 修改 CSS。你看到的唯一 javascript 代码是为了方便添加的，并非必要（更容易展示 CSS 的效果）。
另一方面，你的代码展示了另一种实现与该演示相同效果的方案。所以它仍然具有相关性。
我在手机上看到这个时，有点困惑。然后我恍然大悟，编辑 JS 删除所有内容后，它对我来说就有效了。
我是不是错过了什么？我在 codepen 中没有看到任何粘性页脚。在手机上的 Firefox、Chrome 和 Edge 上都检查过了。
当内容不足以填充空间时，它是粘性的，因此，如果你抓住 code pen 的左下角并将其高度调高，以便段落下方有空间，你就会看到页脚保持在底部并且空白区域会扩展，但是当你减小尺寸以便内容超出“折叠”时，页脚也会向下移动。
太棒了！有时最好的解决方案是最简单的（当你了解如何操作时）昨天我还在为此苦苦挣扎，并尝试各种“创造性”方法。
我不是专家……粘性元素来自哪里？
不错。对于 Greg 来说——js 只是添加或删除内容。对于 Tom 来说——尝试将代码窗口调高并删除内容。
哦，谢谢，我之前没注意到；)
对于手机用户，这里有一个测试链接。相同的内容，但内容较少。
https://cdpn.io/kunukn/debug/JjyVRyR
这真是太棒了。
Safari 移动版加入聊天
在我的 Safari 移动版上似乎可以工作，你看到的结果不一样吗？
这启发我尝试使用
position:sticky;制作一个粘性头部。我很喜欢。https://codepen.io/alexstandiford/pen/dyzaKpa
我喜欢这个，谢谢！
嗯，将此应用于我现有的页脚无效。有什么想法可能会导致它失效吗？看起来很简单。
“首先，请注意，sticky 始终在其父容器内保持粘性”……因此，如果你的元素没有更大的容器，它将无法工作。
引用自：https://www.hamrodev.com/en/tutorials/css-sticky-and-wrapper-containers
我不得不以这种方式解决问题——在我的案例中，我在所有内容周围都包裹了一个 div（需要用于侧边栏菜单过渡），该 div 的高度以编程方式设置为 0（那里发生了一些不规范的溢出问题）。
就是这样，谢谢！
如果你有一个粘性导航栏，你可能想使用
html, body { min-height: 100vh; }代替。它在达到一定滚动高度后会消失。
我有时觉得这种方法会导致 Firefox 在调整窗口大小时无缘无故地显示滚动条？我不确定为什么。
喜欢它的简洁性。但是，即使内容很短，如果第一个元素（头部）有顶部边距，它也会将页脚向下推该边距。但是，如果 body 有顶部填充，它不会将其向下推。
您好，好技巧，您能更新帖子中 codepen 提供的信息吗？
谢谢 :)
这太美了，我哭了。添加了书签并保存在我保存的技巧的 .txt 备忘单中。
如果页面在某个时候变得更长并且有滚动条，这将不起作用。它会中断，并且 body 不包含整个页面，而仅包含到视口高度为止的部分。
这可能会影响诸如应该粘贴到网站顶部的常规粘性定位项目之类的内容。