如何在保持響應式容器的同時創建全寬背景？

全寬背景的溢出 DIV

在響應式設計中，通常希望元素佔據螢幕的整個寬度。然而，容器通常具有預先定義的最大寬度。一種解決方案是將容器包裝在一個超出容器邊界的額外全角 div 中。

考慮以下 CSS：

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
}

此容器的最大寬度為 1280 像素，並且邊距會自動調整以使其在螢幕上居中。若要實現全角溢出，請在容器外部建立一個沒有最大寬度的新div，並在其中套用背景顏色或映像：

.fullwidth {
    background: orange;
    padding-bottom: 100px;
}

將容器包裹在此全角div 中：

<div class="fullwidth">
    <div class="container">
        ...content...
    </div>
</div>

這將允許應用於全角div 的任何背景顏色或影像擴展螢幕的整個寬度，同時容器保持在其預先定義的邊界內。這種方法對於建立橫幅或其他全寬部分非常有用，同時在容器內維護響應式網格系統。

以上是如何在保持響應式容器的同時創建全寬背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！