いば日記

不定期更新の日記

[技術メモ] WEBサイトの横ずれ対策

2009-01-13 17:59:15 | 技術メモ
HTMLを書いていると、全く同様のHTMLなのに、ページによって表示が左右にずれる事がありますよね。

あれの原因は、スクロールバーが表示されたりされなかったりして、サイトのセンタリングがずれてしまうからという事が最近わかりました。

ブラウザによっては、常時スクロールバーが表示されるものもある(IE7)のですが、サイト側で対応したいです(どんなブラウザで見てもOKなように)よね。

■解決法
 以下のCSSを記述すればOKです。要するに縦をブラウザ表示領域の100%+1ピクセルにするということ。これでどんなブラウザでも必ずスクロールバーが出てくれて、ページによるズレがなくなります。

html
{
  margin-bottom:1px;
  height:100%;
}




最新の画像もっと見る

コメントを投稿