【CSS】CSSの「overflow:scroll」でボックス領域にスクロールバーを表示させる方法。

決まったサイズのDIV領域に「overflow」を設定し、スクロールバーを表示させて狭い範囲でも有効に利用する方法です。

概要

イメージ

作成した、とあるシステムの管理画面の一覧画面の一部分。
表示させるサイズが決まっているところに、量が多いテキストを表示させたいって場合に使っています。

コード

では早速。

HTMLは、適当なDIVを設置して下さい。
今回、クラス名は class="box1" とでもしておきます。

CSS

[css]
.box1 {
height: 500px
overflow: scroll;
}
[/css]

これで、縦横のスクロールバーが表示されます。
縦だけでいいのに！　ってな場合は、以下を追記してください。

[css]
overflow-x: hidden;
[/css]

これで横方向のスクロールバーが消えます。
お手軽ですね！

-HTML,CSS
-css, html, overflow