主要のブラウザで縦スクロールバーを出す方法

2010年5月 5日 18:22 | 個別ページ

コンテンツ量が少なくても常に縦スクロールバーを出す方法は、昔に以下の記事を書きました。

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ（safari、Opera、Chome）には有効のようです。

CSSコード

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