在容器div内时将div扩展到页面的整个宽度

trevoray 发表于 Dev

Trevoray

我有一个宽度固定的居中网页，要求导航栏和页脚实际进入整个浏览器宽度。因此突破了容器div。页面永远不会是固定高度。这有可能吗？下面的代码。下面的Codepen演示。

      <div id="content-wrapper">
      <div id="content">
        <div id="header">
          Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. Has homero repudiandae no, cu ius nibh magna disputationi. Et sed esse gubergren percipitur. Eu qui vidit congue, at vix ludus mediocritatem, has ipsum persequeris reprehendunt at.


        </div>

        <div id="nav">Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. </div>

        <div id="body">
               Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. Has homero repudiandae no, cu ius nibh magna disputationi. Et sed esse gubergren percipitur. Eu qui vidit congue, at vix ludus mediocritatem, has ipsum persequeris reprehendunt at.

      Cum tempor probatus intellegat at, ut nisl consequat vis. Eum an mucius sadipscing. Ad eros sale vivendum quo, mei te nostrud instructior deterruisset. Iudico platonem eos ex, everti voluptatum in his. Ferri habeo blandit eam te. Doctus offendit praesent ius et, assum erroribus est cu.
           Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. Has homero repudiandae no, cu ius nibh magna disputationi. Et sed esse gubergren percipitur. Eu qui vidit congue, at vix ludus mediocritatem, has ipsum persequeris reprehendunt at.

      Cum tempor probatus intellegat at, ut nisl consequat vis. Eum an mucius sadipscing. Ad eros sale vivendum quo, mei te nostrud instructior deterruisset. Iudico platonem eos ex, everti voluptatum in his. Ferri habeo blandit eam te. Doctus offendit praesent ius et, assum erroribus est cu.
        </div>



        <div id="footer">
          Iudico platonem eos ex, everti voluptatum in his. Ferri habeo blandit eam te. Doctus offendit praesent ius et, assum erroribus est cu.

        </div>

        </div>
      </div>

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

http://codepen.io/trevoray/pen/QwzPVa

他们的

是的，这样做只是把你header和footer外面content像这样：

<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％宽度，但要确保可以width: 100%为它们分配一个以防万一。并margin: 0在body元素上进行设置以消除div和视口之间的间距。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。