Question

我有一个固定宽度的居中网页，要求导航栏和页脚实际上是整个浏览器的宽度。从而打破了容器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

Answer 1

是的，要做到这一点，只需将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和视口之间的间距。

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

1 个答案: