带有`position：sticky;`的粘性页脚[重复]答案

【问题标题】：Sticky footer with `position: sticky;` [duplicate]带有`position：sticky;`的粘性页脚[重复]
【发布时间】：2018-10-04 23:19:59
【问题描述】：

所以我已经使用了很多粘性页脚，使用负边距技术、弹性框、网格，甚至表格技术。

我刚刚在MDN 中发现了position: sticky;，并想“耶！所有这些乱七八糟的东西终于消失了！”。

该死，看起来我不能使用position: sticky; 来制作一个粘性页脚，因为我想要实现的行为与所做的相反：我希望页脚在没有足够的内容向下滚动，当有足够的内容时在内容之后。

可以通过position: sticky; 实现吗？

【问题讨论】：

如果您希望内容将页脚向下推，那么我不明白您为什么要为此使用位置粘性。所有这一切都会使它与滚动 div 的底部重叠。您可能可以做一些事情来使用粘性，但我会设想它可能会在滚动 div 上使用与页脚相同大小的底部填充，这意味着它比简单的 flex 解决方案更 hacky 和更不流畅

【解决方案1】：

在this article 中，您可以阅读如何使用position: sticky 来实现仅通过CSS 实现的类似功能。我认为对于你的问题，最好使用一点 JS 来控制页面的滚动，并在必要时将position: fixed 添加到页脚。

希望对你有帮助！

【讨论】：

我在那篇文章中没有看到position: sticky 的示例。我当然不会使用 JS 来做这件事，我可以使用 flexbox 用 3 行 CSS 轻松地做到这一点。这只是一个好奇的问题。
好的，我只用它来定位相对于他父母顶部的东西。