Css Sticky Footer - 响应

时间:2013-10-22 11:33:54

标签: css wordpress responsive-design sticky-footer

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

似乎没有响应性,它坚持,但只要我重新调整浏览器的大小,高度就会增加。

页脚需要响应,但无论内容大小如何,都会粘在页面底部。

有问题的网站是:

http://shopexample.co.uk/

真的很感激这方面的一些帮助。

谢谢:)

2 个答案:

答案 0 :(得分:1)

问题不在于您的页脚展开,而是与图片尺寸和body有关。

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

然后可见的是background-color的{​​{1}},巧合的是,与页脚背景的颜色完全相同(body.custom-background)。

您可以更改身体的背景颜色,以区别于页脚。您无法同时将图像调整为全浏览器宽度 AND 高度而不会出现失真。

粘性页脚:我注意到你的页脚&它的包装器不是background-color: #cccccc;fixed,这是粘性页脚的常用方法。然后使用relative属性定位它。

固定位置:

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

相对位置:

  • 将坚持到底
  • 将滚动
  • 只会在到达页面底部时显示

答案 1 :(得分:0)

检查小提琴here http://jsfiddle.net/Mohinder/Yj6gu/

的工作副本

问题出在headerwrap上,它应该与身体高度没有关闭。