CSS3 overflow-y Property

Example

Clip the top/bottom edges of the content inside the div element - if it overflows the element's content area:

div
{
overflow-y:hidden;
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The overflow-y property is supported in all of the major browsers.

Note: The overflow-y property does not work properly in Internet Explorer.


Definition and Usage

The overflow-y property specifies whether or not to clip the top/bottom edges of the content - if it overflows the element's content area.

Tip: Use the overflow-x property to determine clipping at the left and right edges.

Default value: visible
Inherited: no
Version: CSS3
JavaScript syntax: object.style.overflowY="scroll"


Syntax

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

Value Description
visible The content is not clipped, and it may be rendered outside the content box
hidden The content is clipped - and no scrolling mechanism is provided
scroll The content is clipped and a scrolling mechanism is provided
auto Should cause a scrolling mechanism to be provided for overflowing boxes
no-display If the content does not fit in the content box, the whole box is removed
no-content If the content does not fit in the content box, the whole content is hidden