【css】固定幅（親要素）の中の子要素に画面いっぱいに背景色をいれる方法

親要素に固定幅を指定している場合、子要素も親要素の影響を受けるため画面いっぱいに背景色をつけるとなると今までだと子要素を親要素から出してコーディングする必要がありました。

途中で構造を変えるとなると余計な時間がかかるなど手間がかかります。

ですが今では画面に対しての指定などもあるため構造を変えずにコーディングすることができます。

今回は固定幅を指定している親要素の中にある子要素に対して画面いっぱいに背景色をいれた場合の方法について紹介していきたいと思います。

固定幅（親要素）の中の子要素に画面いっぱいに背景色をいれる方法

html

<div class="wrap">
        <div class="box">
                <div class="txt">
                        <p><img src="https://placehold.jp/500x500.png"></p>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
        </div>
</div>

css

.wrap{
        width: 1000px;
        margin: 0 auto;
}      
       
.box{position: relative;}
.box:before{
	content: '';
	position: absolute;
	width: 100vw;
        margin: 0 calc(50% - 50vw);
	height: 100%;
	background: #eee;
	top: 0px;
	z-index: 0;
}

.box .txt{
	text-align: center;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

画面いっぱいに指定する単位

画面に対して指定する単位として「vw」があります。

たとえば「 100vw 」を指定することが画面いっぱい背景をつけることができます。

上の例だと親要素に幅指定しているため「 width: 100vw; 」だけだと子要素の左から始まってしまうので「 margin: 0 calc(50% – 50vw); 」を指定してあげます。

サンプル