28957


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

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

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


CC BY-SA 3.0
2016-09-17T04:17:45.297
28945
2016-09-17T18:02:34.613
7886
question
html css
横スクロールさせないだけではなく、bodyタグの大きさ自体を、スクリーンの大きさに固定させることはできますか？


最近のブラウザだけで良いのであれば表示部の1/100の幅と高さを表す`vw`と`vh`が[あります](https://developer.mozilla.org/ja/docs/Web/CSS/Length)。  
使い方は`px`とかと同じ感じです。

[code]

    body {
        width: 100vw;
    }
    
[/code]

全体がわからないのでご期待通りになるかはわかりませんが…


CC BY-SA 3.0
2016-09-17T12:03:15.243
28953
2016-09-17T12:03:15.243
3974
28945
answer


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

[code]

    box-sizing: border-box;
    margin:     0;
    
[/code]

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`
を消すため、以下のプロパティを追加するだけでも同様の結果は得られるでしょう。

[code]

    margin: 0;
    padding: 0;
    border: none;
    
[/code]

### 参考資料

  * <https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing>
  * <https://developer.mozilla.org/ja/docs/Web/CSS/box_model>


CC BY-SA 3.0
2016-09-17T18:02:34.613
28957
2016-09-17T18:02:34.613
208
28945
answer