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

Question

我有一些困境，我有一个固定宽度的网站，但需要两个流体宽度条在屏幕上100％。我正在为相关网站使用一个相当可怕的wordpress模板，每次保存任何设置时，它都会根据其设置保存内容宽度。在这种情况下，它是900px。

我很满意整个网站是900px，它只是一个标题栏和页脚栏我需要100％，即使这些栏内的元素可以是900px，我只需要颜色延伸到每一边屏幕。

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

Answer 1

只需为页眉和页脚创建一个新容器，然后将其从#container div中取出。这样的事情会起作用：

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;
}