overflow | NN 6 IE 4 CSS 2 |
継承 : なし | |
表示されたサイズがコンテナの高さや幅を超えた場合に、要素のコンテンツを処理する方法を定義します。固定幅が必要なコンテンツタイプ (pre 要素など) を除き、要素のデフォルト設定の動作は width 属性の設定を優先させて要素の高さのオーバーフローの問題を処理します。スクロールバーの表示を制御するために overflow プロパティを body 要素に割り当てると、ブラウザ間の互換性の問題が生じます。overflow のコードは、Windows 版 IE (旧バージョンとの互換モードと標準準拠モード)、Macintosh 版 IE、および Netscape 6 で詳細にテストしてください。 visible を設定するとコンテナブロックが広がり、表示されるコンテンツの最大の幅 (固定されている場合) と高さで表示されます。ボーダー、マージン、余白を要素に設定している場合、拡張されたコンテンツブロックでその設定が保持されます。要素の高さ、幅、および背景イメージまたは背景色が指定されていて、コンテンツが指定されたサイズを超えている場合、結果はブラウザによって異なります。Windows 版 IE では、コンテンツに合わせて背景の高さが拡張され、収まらなかったコンテンツの分だけ後続のコンテンツが押し下げられます。Macintosh 版 IE と Netscape 6 では、背景の領域が指定されたサイズに保たれますが、コンテンツが領域からはみ出し、その要素の後のコンテンツと重なります。これが overflow スタイルプロパティの既定値なので、要素のサイズを制限するときは他の値を指定するか、配置された要素についてはクリッピングの長方形を指定する必要があります。 hidden を設定するとブロックの高さと幅は変更されず、ブロックのサイズでコンテンツがクリップされる可能性があります。ボーダーと余白はそのままですが、マージンの設定はコンテンツをクリップする端では失われます。この値では、スクロールバーは表示されません。 scroll を設定すると、必要かどうかに関係なく、コンテンツブロックの領域中に横と縦のスクロールバーが表示されます。コンテンツがどちらかの方向にスクロールされる必要がある時にだけ、バーはアクティブになります。 auto を設定するとブロック内のコンテンツに必要なときにだけスクロールバーが表示されます。実際には、コンテナの指定された幅に合わせてコンテンツを調整できる場合は、ブラウザでは縦のスクロールバーだけが追加される傾向があります。 |
|
CSS 構文 | |
overflow: overFlowType
|
|
値 | |
次の定数値のいずれか : auto | hidden | scroll | visible |
|
既定値 | |
visible |
|
例 | |
div.aside {position: absolute; top: 200px; left: 10px; height: 100px; width: 150px; overflow: scroll} |
|
適用先 | |
ブロックレベル要素、置換された要素、および配置された要素 |
|
オブジェクト参照 | |
[window.]document.getElementById("elementID").style.overflow
|