横スクロールさせないだけではなく、bodyタグの大きさ自体を、スクリーンの大きさに固定させることはできますか?

投稿者: Anonymous

横幅が大きな要素(例えば広告)を配置したら、横スクロールが表示されてしまい、レイアウトがズレました
・body タグに「overflow : hidden;」を設定したら、横スクロールは表示されなくなったのですが、body タグのwidth自体は広がっているみたいで、同じくレイアウトの見た目がズレました

最終的にやりたいこと
・どんなに大きな要素を配置しても、ブラウザ表示部分のwidthと、bodyタグのwidthを一致させるためにはどうすれば良いでしょうか?

レイアウト
・レスポンシブ

解決

body へ以下の2つのプロパティを追加してみてください。

box-sizing: border-box;
margin:     0;

CSS の width は通常コンテンツの幅を指定します。しかし要素の最終的な幅には、そこに paddingbordermargin が加算されます。ですから bodywidth: 100%width: 100vw を追加しただけではブラウザ表示部分の幅を超えてしまいます。

上記の box-sizing: border-box はこの計算方法を、widthpaddingborder も含むように変更しています。その上で margin をなくしているので width で指定した幅が body へ正確に適用されるようになります。

この幅の計算方法を逆手に取り box-sizing を指定せずに、margin, padding それに border を消すため、以下のプロパティを追加するだけでも同様の結果は得られるでしょう。

margin: 0;
padding: 0;
border: none;

参考資料

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *