横幅がはみ出てブラウザの横するロールバーが出てしまう

  • 2020.01.31
  • CSS
横幅がはみ出てブラウザの横するロールバーが出てしまう

ちょっと初心者的なんですが、ハマってしまったのでメモです。

要素に対して、横幅100%にしているんですが、ブラウザからはみ出てしまいました。
marginやpadding、box-sizeing:no-border; を設定してもはみ出るようで、Chromeの開発パネルで検証を行うとどうやら、body要素が問題っぽい。

調べてみると下記のように、htmlに「overflow: auto;」、bodyに「overflow: hidden;」を設定するとはみ出なくなりました。

こういうことは今まで無かったのですが、使っているjQueryプラグイン(画像スライダーなど)とかの問題もあるのかもしれません。
今後は、リセットとして、セットしておくようにしてもよいかもしれません。

CSSカテゴリの最新記事