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

CSS CSS

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

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

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

html {
overflow: auto;
}
body {
overflow: hidden;
}

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

コメント

タイトルとURLをコピーしました