Eyecatch html css

HTML,CSS

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

2015/01/24

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

概要

イメージ

overflowscroll_01

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

コード

では早速。

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

【CSS】

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

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

-HTML,CSS
-, ,