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

overflow: visible | hidden | scroll | auto

Property values

visible

Default. Content is not clipped and scroll bars are not added.

scroll

Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.

hidden

Content that exceeds the dimensions of the object is not shown.

auto

Content is clipped and scrolling is added only when necessary.

CSS information

Standards information

• CSS 2.1, Section 11.1.1

Remarks

The default value for the body element is auto.

Setting the overflow property to hidden on a textArea object hides its scroll bars.

Setting the 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

The following examples use the overflow attribute and the overflow property to manage content of the object.

This example uses an inline style to automatically adjust itself to overflowing content when the page is loaded.

<div id="oDiv" style="width: 200px; height: 200px; overflow: auto;">
	... 
</div>

This example allows the user to dynamically change the overflow property of a div object by choosing one of the possible overflow values from a select object.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/overflow.htm

<script type="text/javascript">
function SetOverflow(o, sValue)
{
  o.style.overflow = sValue;
}
</script>
<div id="div1" style="font-size: 18pt; background-color: yellow; height: 50px; width: 75px">
The quick brown fox jumped over the lazy dog. </div>
<select onchange="SetOverflow(div1,
  this.options[this.selectedIndex].text)">
  <option selected="">visible</option>
  <option>scroll</option>
  <option>hidden</option>
  <option>auto</option>
</select>

See also

CSSStyleDeclaration

currentStyle

defaults

runtimeStyle

style

Reference

-ms-overflow-x

-ms-overflow-y

position

Other Resources

CSS Enhancements in Internet Explorer 6

Send comments about this topic to Microsoft

Build date: 11/29/2012