スタイルシート［CSS］/ボックス/ボックスに入りきらない場合の表示方法を指定する

overflow は、領域内に収まりきらない内容を、どのように処理するのかを指定するプロパティです。

このプロパティの値に scroll を指定すると、領域をはみ出した内容をスクロールで表示することができます。

div {
width: 200px;
height: 100px;
overflow: scroll;
}

overflow	visible … （領域をはみ出して表示する）デフォルト
	hidden … （はみ出した部分を表示しない）
	scroll … （スクロールで表示する）
	auto … （自動）

【表示のサンプル】

ブラウザにより表示のされ方は異なるようです。

ブラウザ	IE 6	Firefox 1	Netscape 7	Opera 8
visible
hidden
scroll
auto

■visible
FirefoxとNetscapeでは領域をはみ出して表示しますが、IEとOperaでは領域を広げて表示します。ただし、表示モードが「標準モード」の場合には、Operaでは領域をはみ出して表示します。

■hidden
上記の全てのブラウザで、同じように表示されます。

■scroll
上記の全てのブラウザで、同じように表示されます。縦横のスクロールバーが表示されます。

■auto
上記の全てのブラウザで、同じように表示されます。縦のスクロールバーだけ表示されます。

横スクロールバーを表示させたくない場合は、auto を指定しておくといいでしょう。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<div id="example1">
<p>はみ出した部分をスクロールで表示</p>
・
・
</div>

<div id="example2">
<p>はみ出した部分を表示しない</p>
・
・
</div>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

はみ出した部分をスクロールで表示

スクロールできる

はみ出した部分を表示しない

スクロールできない

ボックスに入りきらない場合の表示方法を指定する

overflow: ***;

使用例