Css 粘性页脚 - 响应

标签 css wordpress responsive-design sticky-footer

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

它似乎没有反应灵敏,它会卡住,但只要我重新调整浏览器的大小,高度就会增加。

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

有问题的网站是:

http://shopexample.co.uk/

非常感谢在这方面的一些帮助。

谢谢:)

最佳答案

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

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

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

您可以更改正文的背景颜色以将其与页脚区分开来。您无法在不失真的情况下同时将图像调整为全浏览器宽度高度。

粘性页脚:我注意到您的页脚及其包装未定位固定相对,这是粘性页脚的常用方法。然后使用 bottom 属性定位它。

固定位置:

  • 会坚持到底
  • 不会滚动
  • 永远可见

相对位置:

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

关于Css 粘性页脚 - 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19516720/

相关文章:

html - 将图像添加到流体网格(响应式)布局列会弄乱移动屏幕上的宽度

html - 具有按钮触发器的元素的 CSS 多个状态

html - WordPress 之外的古腾堡编辑器

javascript - 具有适用于不同屏幕的备忘录的响应式日历样式

css - 元素背景图像不会呈现

html - 没有特定高度的相对div

php - SQL - 条件 WHERE

twitter-bootstrap-3 - 如何使 jquery 数据表使用引导表响应类?

css - 在响应式网页设计中,如何确定嵌套列的断点?

javascript - 字体超棒的 CDN JS 在 Pagespeed Insights 上显示为渲染阻塞