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

Question

我正在尝试创建一个div，它位于流畅的网格布局中，背景颜色在页面的整个宽度上延伸，但仍保留内容，如https://unroll.me/的深蓝色和浅蓝色部分

Answer 1

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

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