レスポンシブコンテナーを維持しながら全幅の背景を作成するにはどうすればよいですか?

全幅背景の DIV のオーバーフロー

レスポンシブ デザインでは、要素が画面の全幅を占めることが望ましいことがよくあります。ただし、多くの場合、コンテナーには事前定義された最大幅があります。解決策の 1 つは、コンテナの境界を越える追加の全幅 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 中国語 Web サイトの他の関連記事を参照してください。