プログラム

【CSS】ページにスクロールバーを必ず表示するテクニック

picxpic

サイトの内容がパソコンの1画面に入りきらない場合、スクロールバーが表示されます。

もし縦に短いページと縦に長いページが混在しているサイトの場合、スクロールバーが表示される分だけコンテンツが左に移動し、ページを移動するたびにコンテンツがずれることになります。

これを防ぐには下記のCSSをhtml要素に追加します。
[css]
html {
margin-bottom:1px;
height:100%;
}
[/css]
html要素に1pxマージンを足し、必ずスクロールバーが表示されるようにすることでページごとのズレを防ぎます。

まぁ、極端に縦に短いページと長いページが混在していない限り、そんなに使うことはないと思います。

記事URLをコピーしました