2

我正在开发响应式的 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 属性上设置太多 !important 也可以做到这一点吗？谢谢。

4

3 回答 3

3

如果您的页脚在div.container其中，width:940px;那么给您的页脚 100% 宽度将使其宽度为 940 像素。

您需要将页脚放在容器之外，以使其具有 100% 的主体宽度。

于 2013-08-15T14:14:16.610 回答
0

正如其他人所提到的，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

于 2013-08-15T14:26:07.557 回答
0

当您提供 100% 的宽度时，该元素将获得其容器的宽度。因此，在您的代码中，即使使用重要关键字，它也会获得容器的宽度（因为 100% 应该这样做）。

只需将页脚移出容器即可。然后它就可以工作了，你就不需要这个 !important 关键字了。

于 2013-08-15T14:13:37.373 回答