overflow | NN 6 IE 4 CSS 2 |
Inherited: No | |
Defines how the element treats content with rendered dimensions that exceed the specified height and/or width of the container. Except for some types of content that demand a fixed width (a pre element, for instance), the default behavior of an element is to respect the width attribute setting and handle the issue of overflow in the height of the element. Assigning the overflow property to the body element in an attempt to control the display of scroll bars is risky business for cross-browser compatibility. Test your overflow code thoroughly on IE for Windows (in backward- and standards-compatible modes), IE for Macintosh, and Netscape 6. A setting of visible causes the containing block to expand to allow the full width (if fixed) and height of the content to be displayed. If borders, margins, and padding are set for the element, they are preserved around the expanded content block. If the element has height and width specified, as well as a background image or color, and if the content extends beyond the specified size, the results vary with browser family. IE for Windows expands the height of the background to accommodate the content, pushing succeeding content downward to accommodate the overflowing content. IE for Macintosh and Netscape 6 constrain the background rectangle to the specified size, but the content bleeds beyond the rectangle, and overlaps content that comes after the overflowing element. Because this is the default value for the overflow style property, it is best to specify some other overflow value (or clipping rectangle for a positioned element) whenever you restrict the size of an element. A setting of hidden forces the block to observe its height and width settings, potentially causing the content to be clipped by the size of the block. Borders and padding are preserved, but margins may be lost along the edges that clip the content. No scrollbars appear with this value. A setting of scroll usually generates a set of horizontal and vertical scrollbars inside the rectangle of the content block, whether they're needed or not. The bars become active only if the content actually requires scrolling in any direction. A setting of auto should generate scroll bars only if the content in the block requires it. In practice, browsers tend to add only a vertical scrollbar when the content is text that can adjust to the specified width of its container. |
|
CSS Syntax | |
overflow: overFlowType
|
|
Value | |
Any of the following constants: auto | hidden | scroll | visible. |
|
Initial Value | |
visible |
|
Example | |
div.aside {position: absolute; top: 200px; left: 10px; height: 100px; width: 150px; overflow: scroll} |
|
Applies To | |
Block-level, replaced, and positioned elements. |
|
Object Model Reference | |
[window.]document.getElementById("elementID").style.overflow
|