質問: HTMLとCSSを使ってコーディングをしております。 viewport設定もして、すべての要素をbox-sizing:border-boxにしましたがブラウザの横幅分はみ出ているようです。 Windows PCでChrome、Microsoft Edgeにて検証→横スクロール MacでChromeにて検証→横スクロールしませんでした。 Chrome検証ツールで見る限りbodyとwrapperの横幅に17pxのズレがありまして、 各ブラウザのスクロールバー幅と合致します。 色々調べたり考えては見たものの、答えが出ず困っております。 overflow:hidden;も考えましたが、適用するとh2要素などに縦スクロールが出ます。 何か初歩的なミスなのでしょうか。 どうかご教授いただけますと幸いでございます。 よろしくお願いいたします。 ``` ... ... ``` ``` * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } .wrapper{ width:100vw; } header,main,section,aside,footer{ width:1024px; margin:0 auto; } ```
回答: スクロールバーの幅が影響してるのではないでしょうか?Winではスクロール領域にスクロールバー が常に表示されますが、Macの初期設定ではスクロールした際にのみスクロールバーが表示されるため、レイアウトに影響することがありません。 ↓にサンプルを書きました。おそらくこのケースだと思います。 bodyにスクロールバーが存在する場合は100vwにスクロールバーの幅が含まれますが、今回だとwrapperにスクロールバーがでているためwrapperのwidthは100vw+スクロールバーの幅になると思います。 解決策としては100vwを100%にすると良いかと思われます。 ちなみに、`box-sizing: border-box`はwidthにpaddingやborderを含めるかどうかの設定のため、今回の話には影響していないと思われます。