Q&A
HTMLとCSSを使ってコーディングをしております。
viewport設定もして、すべての要素をbox-sizing:border-boxにしましたがブラウザの横幅分はみ出ているようです。
Windows PCでChrome、Microsoft Edgeにて検証→横スクロール
MacでChromeにて検証→横スクロールしませんでした。
Chrome検証ツールで見る限りbodyとwrapperの横幅に17pxのズレがありまして、
各ブラウザのスクロールバー幅と合致します。
色々調べたり考えては見たものの、答えが出ず困っております。
overflow:hidden;も考えましたが、適用するとh2要素などに縦スクロールが出ます。
何か初歩的なミスなのでしょうか。
どうかご教授いただけますと幸いでございます。
よろしくお願いいたします。
HTML
1<head> 2<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 3</head> 4 5<body> 6<div> 7<header>...</header> 8<main> 9<section>...</section> 10</main> 11</div> 12</body>
CSS
1* { 2 -webkit-box-sizing: border-box; 3 -moz-box-sizing: border-box; 4 -o-box-sizing: border-box; 5 -ms-box-sizing: border-box; 6 box-sizing: border-box; 7 margin:0; 8 padding:0; 9} 10.wrapper{ 11 width:100vw; 12} 13header,main,section,aside,footer{ 14 width:1024px; 15 margin:0 auto; 16}
回答2件
0
ベストアンサー
スクロールバーの幅が影響してるのではないでしょうか？Winではスクロール領域にスクロールバー
が常に表示されますが、Macの初期設定ではスクロールした際にのみスクロールバーが表示されるため、レイアウトに影響することがありません。
↓にサンプルを書きました。おそらくこのケースだと思います。
https://jsfiddle.net/5gdgmjkg/
bodyにスクロールバーが存在する場合は100vwにスクロールバーの幅が含まれますが、今回だとwrapperにスクロールバーがでているためwrapperのwidthは100vw+スクロールバーの幅になると思います。
解決策としては100vwを100%にすると良いかと思われます。
ちなみに、box-sizing: border-boxはwidthにpaddingやborderを含めるかどうかの設定のため、今回の話には影響していないと思われます。
投稿2017/04/22 16:54
編集2017/04/23 04:26
総合スコア41
0
width が固定値だから、では？
CSS
1header,main,section,aside,footer{ 2 max-width: 1024px; 3 width: auto; 4}
投稿2017/04/22 16:23
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/23 13:14