粘性页脚的问题

Posted 2023-03-21

【中文标题】粘性页脚的问题

【英文标题】：Trouble with sticky footer

【发布时间】：2018-05-14 21:06:56

【问题描述】：

我似乎无法让我的粘性页脚工作。经过一番研究，我的理解是页脚的父元素需要设置为位置：相对。然后页脚应该设置为位置：绝对底部：0。我已经这样做了，它看起来很好全屏。但是当浏览器被调整为更小时，页脚位于页面的中间。有什么建议吗？我一直在寻找大约一个小时没有运气。谢谢！

编辑：澄清一下，我希望页脚只有在您滚动到页面底部或整个页面都在视图中时才可见。并非始终在页面上持续存在（位置：固定。）

(Please see the codepen link below)

Codepen Link

【参考方案1】：

您需要为总体 div/body 设置一个 min-height: 100%;。您还需要将padding 添加到在页脚之前关闭的div 中，即.content-area，这样footer 就不会在屏幕高度较小时覆盖您的内容。

https://codepen.io/anon/pen/mqaVxM

【讨论】：

还要确保在正文底部添加等于页脚高度的内边距 + 一点额外的内边距，这样就不会妨碍最底部的内容不可读。

这行得通，但是当你滚动时它总是可见的。我希望它只有在您滚动到页面底部或整个页面都在视图中时才可见。

k，我现在得到问题了。会修改我的答案

k，现在试试 codepen codepen.io/anon/pen/mqaVxM。我更新了。

@Ryan Mcguinn 这对您有帮助吗，还是还有问题？