css - 如何将流体元素扩展到固定宽度的模板之外

Question

我让自己陷入了一些困境，我有一个固定宽度的站点，但需要两个流体宽度条才能 100% 穿过屏幕。我正在为相关网站使用一个相当糟糕的 wordpress 模板，每次保存任何设置时，它都会根据其设置保存内容宽度。在这种情况下，它是 900 像素。

事情是我对整个网站的 900 像素感到满意，它只是我需要 100% 的页眉栏和页脚栏，即使这些栏内的元素也可以是 900 像素，我只需要颜色扩展到屏幕的每一侧.

有问题的网站是http://mysterybox.co/您可以从下面的图片中看到我需要扩展哪个栏。如果有人能指出我正确的方向，那就太好了。

Answer 1

只需为您的页眉和页脚创建一个新容器并将它们从您的#containerdiv 中取出。像这样的东西会起作用：

HTML

<div class="header-wrapper">
  <div id="headerwidth">
   ....
  </div>
</div>

<div class="footer-wrapper">
  <div id="footer">
   ....
  </div>
</div>

CSS

.header-wrapper, .footer-wrapper {
 background-color:#000;
 margin:30px 0 40px;
}

#headerwidth, #footer {
 width:900px;
 margin:0 auto;
}