web codery

[Media Queries]width計算にスクロールバーの幅が入ってしまう

category: HTML/CSS

Media Queriesで指定したmin-widthと同じ値をコンテンツ幅に指定したのに、横スクロールバーが出現してしまうという問題にぶつかったことがあるので、共有のためにメモします。Media QueriesについてはMedia Queriesの基本的な実用方法と書き方を参照してみてください。
下の目次の項目を押すと該当項目までとぶことができます。

目次

  1. 横スクロールバーが出るケースの例
  2. 横スクロールバーが出る理由と対処について

横スクロールバーが出るケースの例

まずはコードを書いて、それから説明をします。

/* html */
<body>
  <div id="container">
    //ここにコンテンツが入る
  </div>
</body>
/* CSS */
div#container {
  width: 100%;
}
@media only screen and (min-width: 960px) {
  div#container {
    width: 960px;
    margin: 0 auto;
  }
}

body直下のdiv要素にスタイルを指定しています。上記のCSSを書いた状態でブラウザの幅を960pxちょっとにしてみると、出るはずのない横スクロールバーが出現するのです。ブラウザ幅を広げていくとスクロールバーは小さくなり、やがて消えます。ちなみにmarginの指定は#containerをセンタリングするために指定していますので、今回の件には関係ありません。

では、なぜスクロールバーが出るはずがないのかというと、この指定をした場合#containerの横幅は
ブラウザの幅が960px未満 ⇒ ブラウザの幅と同じ幅
ブラウザの幅が960px以上 ⇒ 960px
になるはずです。
それなのに横スクロールバーが出るなんておかしいですよね。

横スクロールバーが出る理由と対処について

いろいろと試してみると、どうもコンテンツの縦幅が小さく縦スクロールバーが出ない状況ではこの問題は起こらないようなのです。つまり、Media Queriesのwidth計算に縦スクロールバーの幅(20px弱)が入ってしまっているのが原因のようです。

ということで、コンテンツの幅をMedia Queriesで指定した幅より20pxほど小さくする(もしくは、Media Queriesのwidth指定を20pxほど大きくする)というのが現実的な対処法になりそうです。

@media only screen and (min-width: 960px) {
  div#container {
    width: 940px;
    margin: 0 auto;
  }
}

以上、Media Queriesのwidth計算にスクロールバーが入ってしまう問題についてでした。

管理人にメッセージを送る





ページトップ