表示のズレ【スクロールバー編】
Category:CSS 投稿日:2012年02月05日
▼概要
スクロールバーの表示・非表示を指定しないと表示がズレることがあります。
▼説明
そもそもスクロールバーは、ディスプレイに内容が表示しきれない場合、右に表示されます。しかし、ページによっては、ディスプレイに内容が収まるページも、もちろんありますよね?ここが重要です。スクロールバーをしっかり指定してあげないとズレます。つまり、内容が収まるページと収まらないページでは、スクロールバーの幅の分、ズレてしまうということです。
▼解決策
解決策は、「ディスプレイに内容が収まるページでもスクロールバーを表示させる」です。そうすれば、常にスクロールバーが表示されているので、ズレることはなくなります。
下記のようなプログラムをcssに記述します。
html { overflow-y:scroll; }
上記のプログラムを記述することで、スクロールバーが常に表示されるようになります。
ディスプレイに内容が収まっていてもスクロールバーが表示されている↓
動作確認ブラウザ:IE7, Chrome16, FireFox10, Opera11