【CSS】親要素の中に画面幅いっぱいの子要素を作成する方法

既存サイトの修正や、Wordpressテーマのカスタマイズ等で、構造は変えられない親要素の中に、図のような画面幅いっぱいに背景をひいたコンテナを配置する方法です。

実装サンプル

最大幅1200pxの親要素の中に、画面幅いっぱいに表示させたいコンテナ（.full-width）を設置します。普通に設置しただけだと、親要素の中に納まります。

HTML

<main>
   <div class="container">
     <div class="full-width">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.gestas leo mattis. Pellentesque pharetra ligula at velit sollicitudin molestie. Sed in ornare nibh. </p>
     </div>
</main>

CSS

.container{
 background: #f4f4f4;
 box-sizing: border-box;
 max-width: 1200px;
 margin: 0 auto;
 padding: 60px 30px;
 width: 100%;
}
.full-width {
 background: #f3e2b3;
}

子要素（.full-width）の左右にネガティブマージンを指定

子要素の左右にネガティブマージンを指定することで、親要素の幅を超えた画面幅いっぱいの背景が引けます。
calc(50% - 50vw)とは親要素の左右の余白です。

CSS

.full-width {
 background: #f3e2b3;
 margin-right: calc(50% - 50vw);
 margin-left: calc(50% - 50vw);
}

子要素（.full-width）の左右にpaddingを指定

ネガティブマージンを指定しただけだと、子要素の中のコンテンツも外に行ってしまうので、左右にpaddingを指定し、親要素の中に収めるようにします。

CSS

.full-width {
 background: #f3e2b3;
 margin-right: calc(50% - 50vw);
 margin-left: calc(50% - 50vw);
 padding-right: calc(50vw - 50%);
 padding-left: calc(50vw - 50%);
}

注意点

width: 100vwは、スクロールバーの幅を含むので、縦のスクロールバーが出ている場合は、はみ出てしまいます。
横スクロールが出ないように、幅を指定している要素の親要素に（今回の場合はmain）、overflow-x: hiddenを指定します。

CSS

main{
 overflow-x: hidden;  
}