具有 100% 页眉和页脚宽度的奇异网格布局 [英] Singularity Grid layout with header and footer width 100%

问题描述

我使用的是 Singularity Grid System 1.1.2 版，12 列网格的变量是 $grids: 12, $gutters: 1/3.网格布局工作正常.现在我想给出覆盖整个浏览器宽度的顶部 Headergroup、中间部分和页脚背景颜色.所有内容都居中并占据总宽度的 90%.

解决方案

不幸的是，创建全彩色出血是一项丑陋的任务，但它很容易做到.您将想要执行以下操作:

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

<div class="全条纹页脚"><footer class="container"></footer>

您需要做的是将网站的每个部分包装在一个 div 中，该 div 将拉伸整个页面的宽度，同时保持其中包含的内容片段共享一个类似的类.您的 CSS 将如下所示:

.full-stripe {宽度:100%；@include clearfix;&.header {背景:红色；}&.main {背景:绿色；}&.页脚{背景:蓝色；}}.容器 {边距:0 自动；填充:0；最大宽度:68.5em；@include clearfix;}

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

• 代码
• 完整

I am using Singularity Grid System version 1.1.2, my variables for the 12 column grid are $grids: 12, $gutters: 1/3. The grid layout is working fine. Now I want to give the top Headergroup, middle section and the footer background color that covers the full browser width. All the content are centered and spans 90% of the total width.

解决方案

Creating full color bleeds is an unfortunately ugly task all around, but it's fairly easy to do. You're going to want to do something like the following:

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

What you need to do is wrap each section of your site in a div that will stretch the whole width of your page, while keeping the contained content pieces within it sharing a similar class. Your CSS would then look something like the following:

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

I've created a CodePen to demonstrate the point. The container has a little bit of extra styling to make it stand out and help visualize what's going on:

• Code
• Full

这篇关于具有 100% 页眉和页脚宽度的奇异网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！