Question

我正在使用最新版的Zurb Foundation。我想使用全宽度布局并使用off canvas元素。

所以我有demo突出显示问题，但是我想要全宽行，但仍然可以用全宽背景颜色包围该行。（例如http://foundation.zurb.com/）喜欢英雄块。

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

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

全宽行和周围容器

1 个答案:

jsFiddle