【CSS】背景だけ画面いっぱいに引く
CSS
タイトル通り、コンテンツは要素の幅に収めて、背景は画面いっぱいにしたい時のCSSです。
HTML
<div class="content">
<div class="full">背景だけいっぱいに引く</div>
</div>CSS
.full {
background: #26a69a;
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
width: 100vw;
}paddingが必要な場合は、こちらに差し替えます。
padding: 上下のpadding calc(50vw - 50% + 左右のpadding);いつ使うの？
スマホ特化・モバイルファーストサイトを作るときに使いました。
こんな感じの、メインのコンテンツが細長くなっているサイトです。
背景なし・ありが切り替わるようにしたいけど、わざわざそのためにdivつけたくないな……と思いこの方法にいたりました。