具有100%页眉和页脚宽度的奇异网格布局

Question

我使用的是奇点网格系统1.1.2版，我的12列网格变量是$grids:12，$dridges:1/3。网格布局运行良好。现在，我想给出覆盖整个浏览器宽度的顶部页眉组、中间部分和页脚背景颜色。所有内容都以中心为中心，跨度占总宽度的90%。

Answer 1

创建全色出血是一项非常糟糕的任务，但它很容易做到

<div class="full-stripe header">
  <header class="container"></header>
</div>
<div class="full-stripe main">
  <main class="container"></main>
</div>
<div class="full-stripe footer">
  <footer class="container"></footer>
</div>

您需要做的是将网站的每个部分包装在一个div中，该div将拉伸页面的整个宽度，同时使其中包含的内容片段共享一个类似的类。你的CSS会看起来像下面这样：

.full-stripe {
  width: 100%;
  @include clearfix;
  &.header {
    background: red;
  }
  &.main {
    background: green;
  }
  &.footer {
    background: blue;
  }
}
.container {
  margin: 0 auto;
  padding: 0;
  max-width: 68.5em;
  @include clearfix;
}

我创建了一个CodePen来演示这一点。容器有一点额外的样式，使其脱颖而出，并有助于可视化正在发生的事情：

• 代码
• 已满

Answer 2

您可能会发现工具箱中的嵌套上下文mixin非常有用。它查找百分比容器的上下文，因此hgroup上的@include nested-context(90%, center)将使其具有全宽。