css - 流体网格布局中的全宽 div 背景颜色

Question

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

Answer 1

首先，您需要为蓝色背景创建一个 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%;
}