css - 全宽行和周围的容器

Question

我使用的是最新版本的 Zurb Foundation。我想使用全宽布局并使用非 Canvas 元素。

所以我有一个 demo突出显示问题，但是我想要全宽行，但仍然能够用全宽背景色包围该行。 (例如 http://foundation.zurb.com/ )就像英雄 block 。

为简单起见，这是有问题的代码:

HTML

 <section class="content-block">
      <div class="row full-page">
          <div class="large-12 columns">
              <h3>We&rsquo;re stoked you want to try Foundation! </h3>
              <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
              <p>Once you've exhausted the fun in this document, you should check out:</p>             
          </div>
        </div>
        </section>

CSS:

.full-page {
   min-width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}


.content-block {
    background:#000;
}

我希望页面的整个宽度为黑色。

Answer 1

发生这种情况是因为在 .columns 元素上他们使用了 float。这使元素脱离了流，因此不再根据其内容调整大小(因为内容不在同一流中并且只是溢出)。

要强制元素保持在同一流中，您可以使用:

.full-page {
    min-width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
    overflow: hidden;
}

jsFiddle