overflow property
Sets or retrieves a value indicating how to manage the content of the object when the content exceeds the height or width of the object.
Syntax
Integer value = object.put_overflow( v);Integer value = object.get_overflow(* sOverflow);
Property values
Type: BSTR
visible (visible)
Default. Content is not clipped and scroll bars are not added.
scroll (scroll)
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
hidden (hidden)
Content that exceeds the dimensions of the object is not shown.
auto (auto)
Content is clipped and scrolling is added only when necessary.
String format
visible | hidden | scroll | auto
CSS information
Applies To | All elements |
Media | visual |
Inherited | no |
Initial Value | visible |
Standards information
- CSS 2.1, Section 11.1.1
Remarks
The default value for the body element is auto.
Setting the IHTMLCurrentStyle::overflow property to hidden on a textArea object hides its scroll bars.
Setting the IHTMLCurrentStyle::overflow property to visible causes the content to clip to the size of the window or frame that contains the object.
With Microsoft Internet Explorer 6 and later, when you use the !DOCTYPE declaration to specify standards-compliant mode, this property applies to the html object.
Examples
This example demonstrates the overflow behavior as a result of different IHTMLCurrentStyle::overflow settings. Each div element uses a different setting.
div {
width: 150px;
height: 150px;
border-style: solid;
border-width: thin;
font-family: sans-serif;
float: left;
margin-right: 10px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
<body>
<div class="visible">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="scroll">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="auto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>
The following image shows the result. In the first div element, content is not clipped and scroll bars are not added. In the second div element, content that exceeds the dimensions of the object is not shown. In the third div element, content is clipped and scroll bars are added. In the fourth div element, content is clipped and scrolling is added only when necessary:
Requirements
Minimum supported client |
Windows XP |
Minimum supported server |
Windows Server 2003 |
Header |
Mshtml.h |
IDL |
Mshtml.idl |
DLL |
Mshtml.dll |
See also
Reference
Other Resources