流体网格布局内的全宽 div 背景颜色答案

【问题标题】：Full width div background color inside a fluid grid layout流体网格布局内的全宽 div 背景颜色
【发布时间】：2014-02-17 00:50:51
【问题描述】：

我正在尝试创建一个位于流体网格布局内的 div，该布局具有跨越整个页面宽度但仍包含内容的背景颜色，例如 https://unroll.me/ 的深蓝色和浅蓝色部分

【问题讨论】：

这个问题太模糊了，在其他问题和基本搜索结果中都有详细介绍。但是，您可能想从这里开始coding.smashingmagazine.com/2011/01/12/…

标签： css html background grid fluid-layout

【解决方案1】：

#mydiv {
    width: 100%;
    background: blue;
}

【讨论】：

【解决方案2】：

首先，您需要为蓝色背景创建一个 div。然后你需要在蓝色背景 div 中创建一个 div 来保存你的内容。

<div id="blueBackground">

    <div id="contentDiv">

      <!-- your content here -->

    </div>

</div>

接下来，您将使用 CSS 设置 div 的样式

#blueBackground {
    background:#hexcolor;
    width:100%;
    padding: 40px 15px; /* first number sets vertical padding - second sets horizontal */
}

#contentDiv {
   width: 100%;
}

【讨论】：

这成功了！我只是将 div "blueBackground" 放在网格容器之外，它完全符合我的要求。感谢您的帮助！