表示のズレ【スクロールバー編】
Category:CSS    投稿日:2012年02月05日
このエントリーをはてなブックマークに追加
▼概要

 スクロールバーの表示・非表示を指定しないと表示がズレることがあります。

 

▼説明

 そもそもスクロールバーは、ディスプレイに内容が表示しきれない場合、右に表示されます。しかし、ページによっては、ディスプレイに内容が収まるページも、もちろんありますよね?ここが重要です。スクロールバーをしっかり指定してあげないとズレます。つまり、内容が収まるページと収まらないページでは、スクロールバーの幅の分、ズレてしまうということです。

 
 

ディスプレイに内容が収まる場合↓

 

ディスプレイに内容が収まらない場合↓

 

▼解決策

 解決策は、「ディスプレイに内容が収まるページでもスクロールバーを表示させる」です。そうすれば、常にスクロールバーが表示されているので、ズレることはなくなります。
 下記のようなプログラムをcssに記述します。

html {
    overflow-y:scroll;
}

 上記のプログラムを記述することで、スクロールバーが常に表示されるようになります。

 

ディスプレイに内容が収まっていてもスクロールバーが表示されている↓

 

動作確認ブラウザ:IE7, Chrome16, FireFox10, Opera11

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です