流體網格布局內的全寬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%;
}