横幅が大きな要素(例えば広告)を配置したら、横スクロールが表示されてしまい、レイアウトがズレました
・body タグに「overflow : hidden;」を設定したら、横スクロールは表示されなくなったのですが、body タグのwidth自体は広がっているみたいで、同じくレイアウトの見た目がズレました
最終的にやりたいこと
・どんなに大きな要素を配置しても、ブラウザ表示部分のwidthと、bodyタグのwidthを一致させるためにはどうすれば良いでしょうか?
レイアウト
・レスポンシブ
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するbody
へ以下の2つのプロパティを追加してみてください。
box-sizing: border-box;
margin: 0;
CSS の width
は通常コンテンツの幅を指定します。しかし要素の最終的な幅には、そこに padding
と border
と margin
が加算されます。ですから body
に width: 100%
や width: 100vw
を追加しただけではブラウザ表示部分の幅を超えてしまいます。
上記の box-sizing: border-box
はこの計算方法を、width
に padding
と border
も含むように変更しています。その上で margin
をなくしているので width
で指定した幅が body
へ正確に適用されるようになります。
この幅の計算方法を逆手に取り box-sizing
を指定せずに、margin
, padding
それに border
を消すため、以下のプロパティを追加するだけでも同様の結果は得られるでしょう。
margin: 0;
padding: 0;
border: none;