子要素を画面いっぱい(全幅)に表示する場合の注意点「width: 100vw;」

楽天もヤフーショッピングも店舗デザインがだいぶ制限されてきました、やっぱりデザインを統一化したいというのが本音なんでしょうね。

 

そんなオリジナルデザインで良く使う手法が子要素を画面いっぱい(全幅)に表示する手法、ワードプレスでも使います。

 

背景だけ画面幅いっぱいにして中のコンテンツは親要素の中に収めたい場合は

 

※下記を利用した場合も同じです。

 

ここで注意点!

vw単位は、スクロールバーの領域も含めた横幅だということ。水平スクロールバーが表示されるようになってしまいます。

 

解決策は 「overflow: hidden;」、これを親要素に付け加えることを忘れずに・・・。

 

 

 

参考サイト

コンテナからの解放。

子要素を親要素(インナー幅)からはみ出して画面いっぱいにするCSS

 

コメント

タイトルとURLをコピーしました