Css 在容器div内将div扩展到页面的全宽

我有一个固定宽度的居中网页，要求导航栏和页脚实际占据整个浏览器宽度。因此，打破了容器分区。页面将永远不会是一个固定的高度。这可能吗？代码如下。代码笔演示进一步如下

---

---

---

是的，要做到这一点，只需将您的

页眉和
页脚置于
内容之外，如下所示：

<div id="content-wrapper">
  <div id="header">
    <div id="nav"></nav>
  </div>

  <div id="content">
    <div id="body"></div>
  </div>

  <div id="footer"></div>
</div>



您的页眉和页脚应该自动为100%宽度，但为了确保您可以为它们指定一个
宽度：100%
，以防万一。另外，在
body
元素上设置
margin:0
，以消除div和viewport之间的间距。
顺便说一句，导航不必位于页眉内部，但通常最好将两者都包装在某种东西中，以将它们与restYes分开，但内容包装器允许页眉固定宽度，同时仍在较大的浏览器窗口上居中。如果希望页眉固定宽度并居中，则可以将页眉和导航放在包装器内（例如顶部包装器）。确保导航不在收割台内。给顶部包装和导航100%的宽度，给标题你想要的宽度和边距：0自动；我觉得我离它很近了，但我无法让导航栏100%地进入浏览器窗口。你能看出这有什么问题吗？链接：只需在css中添加一个
正文{margin:0；}
。默认情况下，body元素具有边距
      #content-wrapper { width:100%;  font-family:   Arial, Helvetica, sans-serif;}

      #content { width:980px; margin:auto; }

      #header { background-color:tan; padding: 20px; margin-bottom:20px;}

      #nav {background-color:yellow; padding:20px;  margin-bottom:20px;}

      #body { background-color: green; padding:20px; margin-bottom:20px;}

      #footer { background-color:blue; color:white; padding:20px;}

<div id="content-wrapper">
  <div id="header">
    <div id="nav"></nav>
  </div>

  <div id="content">
    <div id="body"></div>
  </div>

  <div id="footer"></div>
</div>