FirefoxやWebkit系のブラウザでWebサイトを見ていると、
ページを移動した際に、コンテンツがピクピク動く現象を見ることがある。

これはどういうことかと言うと、
ページが短いコンテンツでは、スクロールバーがでないが、
長いコンテンツでは、スクロールバーが出る。
言い換えると、1画面で収まるか収まらないか。

で、なぜコンテンツが動くか。
一言で言えば、スクロールバーの有無でコンテンツのセンタリング位置がずれるから。

解消するには、下記が有効。

html{
overflow-y:scroll;
}

FirefoxとWebkit系はこれでOK。
だがこの場合、IEは元々問題にしていないのだが、
Operaで効果がない。

なぜか。
overflow-yのプロパティは元々はIEの独自拡張で、css3で正式実装されることになっている。
しかし、Firefoxではすでに独自で実装していたからだ。

basic box model
overflow-x・・・はみ出た要素の左右の表示方法を指定する
overflow-y・・・はみ出た要素の上下の表示方法を指定する
overflow-style・・・はみ出た要素のスクロール方法を指定する

ということで、別の方法がある。

html要素自体の高さを100％にして、それに対し、margin-bottomで余白をもうける。
100％＋○px（1pxで十分だけど）なら、必ず1画面以上の大きさになる。

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

これで、上記で挙げたブラウザでは全てスクロールバーが常時表示されることになる。
ということは、ずれないよって話。