Help us understand the problem. What is going on with this article?

【CSS3】画面横幅を100%にしたいときに有効な手段

More than 3 years have passed since last update.

html5でフロントを作っていて、画面横幅にスクロールバーが出て気持ち悪かったので、対処した方法を自分用にメモ

現象

  • 手がけている画面の端にマージンが表示されているが、画面幅を収めたい
  • 横スクロールバーが表示されている

対策

  • ルート要素にCSS要素 overflow-x: hiddenを追加する

対処コード

front.html
html {
    overflow-x: hidden;
}

結果

画面幅を100%にすることができ、余計なスクロールバーが出なくなった。

備考

http://momdo.github.io/css2/visufx.html#overflow

上記のリファレンスに

hidden
この値は、コンテンツが切り抜かれ、スクロールなしのユーザーインターフェースが切り抜く要素の外側でコンテンツを閲覧するために提供されるべきであることを指示する。

なので、今回の件ではルート要素に指定してあげることで、要素の外側を切り取って表示してくれるという解釈。

yu_okb
アスリート並の身体能力を持つiOSエンジニア。アスリート指数は77です。定時後はジムにしか行きません。
https://itunes.apple.com/jp/developer/ohkubo-yuhei/id1003046002?mt=8&ign-mpt=uo%3D2
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away