WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > overflow-y
overflow-y 

はみ出た内容の表示方法を指定する(IE独自の仕様)

このエントリーをはてなブックマークに追加

高さを指定したDIVなどのブロック要素の範囲内に文章等の内容が入りきらない場合に、はみ出た部分の表示方法を指定します。
overflowプロパティも参考にしてください。

書式

(例) overflow-y:hidden;

パラメーター

●visible
 ボックスからはみ出して表示されます(初期値)。
 IEは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
●scroll
 入りきらない内容はスクロールして見られるようになります。
●hidden
 はみ出た部分は表示されません。
●auto
 ブラウザに依存します(一般的にはスクロールして見られるようになります)。

指定なし

<div style="width:100px;height:30px;border:1px solid #ccc;">
あいうえおかきくけこ<br />さしすせそ<br />たちつてと
</div>
あいうえおかきくけこ
さしすせそ
たちつてと

overflow-y:visible

<div style="width:100px;height:30px;border:1px solid #ccc;overflow-y:visible;">
あいうえおかきくけこ<br />さしすせそ<br />たちつてと
</div>
あいうえおかきくけこ
さしすせそ
たちつてと

overflow-y:scroll

<div style="width:100px;height:30px;border:1px solid #ccc;overflow-y:scroll;">
あいうえおかきくけこ<br />さしすせそ<br />たちつてと
</div>
あいうえおかきくけこ
さしすせそ
たちつてと

overflow-y:hidden

<div style="width:100px;height:30px;border:1px solid #ccc;overflow-y:hidden;">
あいうえおかきくけこ<br />さしすせそ<br />たちつてと
</div>
あいうえおかきくけこ
さしすせそ
たちつてと

overflow-y:auto

<div style="width:100px;height:30px;border:1px solid #ccc;overflow-y:auto;">
あいうえおかきくけこ<br />さしすせそ<br />たちつてと
</div>
あいうえおかきくけこ
さしすせそ
たちつてと