Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

overflow-y property

Sets or retrieves how to manage the content of the object when the content exceeds the height of the object.

Syntax

overflow-y: visible | scroll | hidden | auto

Property values

visible

Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.

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

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuevisible

Standards information

There are no standards that apply here.

Examples

This example shows two div elements that each contain text. In the first div element, the overflow-y property is set to visible. In the second div element, the overflow-y property is set to hidden.


 div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
}
.of_visible {
  overflow-y: visible;
}
.of_hidden {
  overflow-y: hidden;
}


<body>
  <div class="of_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="of_hidden">
    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 images show the result. In the first div element, content is not clipped and scroll bars are not added:

An image showing the overflow-y property set to visible.

In the second div element, content is clipped and scroll bars are not added:

An image showing the overflow-y property set to hidden.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
overflow
overflow-x
position

 

 

Show:
© 2014 Microsoft