Overflow

要素内容をトリミングして、オーバーフロー（はみ出した）部分の処理を指定します。
横や縦一方向だけ指定することもできます。このプロパティを実行するには、要素にPOSITIONでABSOLUTEかRELATIVEを指定しなければなりません。
OVERFLOW-XとOVERFLOW-Yは、IE5.0から対応しています。

●関連プロパティ

POSITION | WIDTH | HEIGHT

{ overflow : visible | scroll | hidden | auto }

{ overflow-x : visible | scroll | hidden | auto }

{ overflow-y : visible | scroll | hidden | auto }

スクロール表示で指定

要素内容をトリミングしてはみ出した部分をスクロールさせて表示させます。
サンプルは400px×400pxの画像を300px×300pxにトリミングした場合です。

{ overflow : scroll }

div.space { position: absolute;
            top: 60px; left: 40px; height: 300px; width: 300px;
            margin: 0pt 0pt;
            border: 1px inset rgb(204,204,204); }

sample

トリミングで指定

要素内容をトリミングし、はみ出した部分を表示しません。

{ overflow : hidden }

div.space { position: absolute;
            top: 60px; left: 40px; height: 300px; width: 300px;
            margin: 0pt 0pt;
            border: 1px inset rgb(204,204,204); }

<div class="space" style="overflow: hidden;"> <img border="0" src="sample_map.gif" width="400" height="400"> </div>

sample

自動的にトリミング

要素内容のトリミングを、ブラウザが自動的に処理します。

{ overflow : auto }

div.space { position: absolute;
            top: 60px; left: 40px; height: 300px; width: 300px;
            margin: 0pt 0pt;
            border: 1px inset rgb(204,204,204); }

<div class="space" style="overflow: auto;"> <img border="0" src="sample_map.gif" width="400" height="400"> </div>

sample