Css 粘性页脚 - 响应式

Posted 2023-03-06

【中文标题】Css 粘性页脚 - 响应式

【英文标题】：Css Sticky Footer - Responsive

【发布时间】：2013-10-31 06:08:00

【问题描述】：

我正在尝试在自定义 WordPress 主题上创建粘性页脚。我看了很多在线教程都没有成功。

它似乎没有响应式地工作，它卡住了，但是一旦我重新调整浏览器的大小，高度就会增加。

页脚需要具有响应性，但无论内容大小如何，页脚都必须贴在页面底部。

有问题的网站是：

http://shopexample.co.uk/

非常感谢对此提供一些帮助。

谢谢:)

【问题讨论】：

jsfiddle.net/4Yt2G/1 - 上面的jsfiddle。

我看过你的小提琴，你为什么要在 .headerwrap 中保留 .footerwrap？据我所知，粘性页脚通常相对于 100% 高度节点放置。

Have a look at this example。使用媒体查询为响应式设计所针对的每个屏幕分辨率设置页脚的高度。在任何有意义的屏幕宽度下，您都会有中断（媒体查询），只需设置页脚的固定大小以匹配。此外，您可以使用媒体查询将其设置为粘性页脚，直到屏幕太短而无法理解，然后将其设置为浮动页脚。

【参考方案1】：

问题不是你的页脚扩展，它与图像尺寸和body有关。

当您调整浏览器的大小（更小）时，背景图像的大小会适应视口的宽度，而不是高度。这意味着在某一点上，图像不再垂直适合视口。

那么可见的是您的body.custom-background 的background-color，巧合的是，它与您的页脚背景颜色完全相同（background-color: #cccccc;）。

您可以更改正文的背景颜色以将其与页脚区分开来。您不能同时将图像大小调整为全浏览器宽度和高度而不会变形。

粘性页脚：我注意到您的页脚及其包装没有定位fixed 或relative，这是粘性页脚的常用方法。然后用bottom 属性定位它。

固定位置：

会粘在底部 不会滚动 将始终可见

相对位置：

会粘在底部 将滚动 仅在到达页面底部时可见

【讨论】：

感谢您的帮助@Tyblitz

【参考方案2】：

检查你的小提琴here http://jsfiddle.net/Mohinder/Yj6gu/的工作副本

问题在于 headerwrap 没有关闭它应该在的位置和身体高度。