css - Css 粘性页脚 - 响应式

Question

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

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

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

有问题的网站是：

http://shopexample.co.uk/

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

谢谢 ：）

Answer 1

问题不在于您的页脚扩展，它与图像尺寸和body.

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

然后可见的是background-color您的 ，巧合的是，它与您的页脚背景 ( )body.custom-background的颜色完全相同。background-color: #cccccc;

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

粘性页脚：我注意到您的页脚及其包装器未定位fixedor relative，这是粘性页脚的常用方法。然后将其与bottom属性一起定位。

固定位置：

• 会坚持到底
• 不会滚动
• 将始终可见

相对位置：

• 会坚持到底
• 将滚动
• 仅在到达页面底部时可见

Answer 2

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

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