Question

我正在研究Bootstrap主题的响应性。我通过在functions.php中添加代码来禁用对子主题的响应。一切顺利，没问题。

现在父容器已修复： HTML：

 <div class="container">

CSS：

 .container{width: 940px;}

但我希望页脚部分具有全站点背景颜色。我怎么能这样做？

我尝试过设置不同的方法，例如width：auto，width：200％，但它没有给我想要的结果。

假设这是页脚部分：

<footer>
   My footer
</footer>

我在儿童主题上尝试过CSS（不工作）

footer {
  background: #CCCCCC;
  width:100% !important;
  position:absolute !important;   

}

这也可能没有设置太多！重要的CSS属性？感谢。

Answer 1

如果您的页脚位于div.container width:940px;内，那么将页脚宽度设为100％将使其宽度为940px。

您需要在容器外部放置页脚，使其宽度为100％。

Answer 2

当您给出100％宽度时，元素将获得其容器的宽度。所以在你的代码中，即使使用了重要的关键字，它也会获得容器的宽度（因为那是100％应该做的）。

只需将页脚放在容器外面。然后它会工作，你不需要这个！重要的关键字。

Answer 3

正如其他人所提到的，从footer的父容器中删除.container将允许它的宽度为视口/文档的整个大小。

如果由于模板而无法更改此HTML结构级别，则可以使用伪元素伪造宽度，如下所示：

footer {
    position: relative;
    background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9999px;
    /* some huge width */
    background-color: inherit;
}
footer::before {
    right: 100%;
}
footer::after {
    left: 100%;
}

请参阅jsFiddle。

取自CSS Tricks: Full Browser Width Bars

如何使用固定的父div为浏览器的整个宽度提供页脚背景颜色

3 个答案: