私のサイトでもそうですが、テンプレートを固定でセンターに寄せると、スクロールバーが出る、出ないで、センターの位置が変わってしまいます。
それによって、ページを切り替えていると、テンプレート全体が数ミリ左右にずれて見えてしまいます。
私はそんなに(というか全く)気にならなかったのですが、気になる人には気になるみたいで・・・
それを防ぐには、「常にスクロールバーを表示する」ということが有効です。
IEはデフォルトで、常にスクロールバーが表示されていますが、Firefoxは、スクロールしなくても全体が見えるページはスクロールが表示されません。
方法ですが、CSS(スタイルシート)を利用します。
外部スタイルシートに以下のソースを追加します。
html{overflow-y:scroll;}
htmlに記述するのがポイントです。
一般的にはbodyに追加すると思うのですが、それではIEで二重にスクロールバーが出てしまいます。(これはバグ?)
同様にWindows版OperaとNNにも適用されるのか?と思いましたがだめでした。
誰か、OperaとNNでも「常にスクロールバーを表示する」方法を知っている方がいらっしゃいましたら、教えてください。
余談ですが、Operaにはブラウザの設定で「常にスクロールバーを表示しない」ということができます。
これでは、ページのどのくらいの位置を読んでいるのかわからなくなってあまり意味ないと思いますが、どうなのでしょうか?(ホイールがないマウスを使用していたら、スクロールもできないよ!!)
2006/08/23 追記
なぜ、html{overflow-y:scroll;}がFirefoxにしか対応できなかったのか、謎が解けました。
そもそも、htmlやbodyにoverflow-yあるいはoverflow-xを使用できるのは、IE独特のプロパティだったらしいです。
そしてCSS3からoverflow-yあるいはoverflow-xが適用されるようになったとの事。
今のところ、FirefoxがCSS3に対応しているので、Firefoxのみがきちんと表示されたと言うことでしょうか。
間違ってたらすみません。
あれ?でもOperaってCSS3に対応してたような・・・
だれか正しい解答を教えて~
2007/02/22 追記
Windows /IE6、Firefox2、Opera9.1、NN7.1全てでスクロールバーが出る方法がわかりました。(動作確認済み)
正確に言えば、IE6はスクロールバー領域が表示されます。他のはスクロールバーも出現します。
html{
height:100%;
margin-bottom:1px;
}
とCSSに記述すればよいとのこと。
このソースを見たらどういうことかすぐ分かると思いますが、画面いっぱいのサイズが100%、それに1pxを足すことで、コンテンツ量が画面からあふれるため、スクロールバーが出るってことですね。
うむむ、よく考えたら思いつきそうなことなのに、思いつかなかった私って・・・
このソースは
Emotional Webさんのサイトで知りました。
スクロールバーの有無によるセンタリングのずれを解消するには | Emotional Web