totn CSS

CSS: overflow-y property

This CSS tutorial explains how to use the CSS property called overflow-y with syntax and examples.

Description

The CSS overflow-y property defines what to do when content overflows the content box vertically (ie: top and bottom), such as displaying the content outside of the content box, clipping the content, or displaying a vertical scroll bar.

Syntax

The syntax for the overflow-y CSS property is:

overflow-y: value;

Parameters or Arguments

value

The behavior to apply when content overflows the content box vertically. It can be one of the following:

Value Description
visible Content is not clipped, but is displayed outside of the content box (this is the default behavior)
div { overflow-y: visible; }
hidden Content is clipped, the overflow content is hidden, and no vertical scroll bar is displayed
div { overflow-y: hidden; }
scroll Content is clipped and the vertical scroll bar is displayed
div { overflow-y: scroll; }
auto Browser determines what to do with the overflow content, which can vary from browser to browser (but generally results in the vertical scroll bar being displayed as required)
div { overflow-y: auto; }
inherit Element will inherit the overflow from its parent element
div { overflow-y: inherit; }

Note

  • The overflow-y property applies to block, inline-block and table cells.
  • The overflow-y property does not handle horizontal overflow. To handle horizontal overflow, see the overflow and overflow-x properties.

Browser Compatibility

The CSS overflow-y property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera 9.5+
  • Safari (WebKit)

Example

We will discuss the overflow-y property below, exploring examples of how to use this property in CSS.

Visible

Let's look at an example where we set the overflow-y to visible.

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow-y: visible; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow-y example, we have set the overflow-y to visible which means that when the content overflows the content box vertically (ie: top to bottom), it is not clipped but will display outside of the content box.

Hidden

Now, let's take our same example and set the overflow-y to hidden.

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow-y: hidden; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow-y example, we have set the overflow-y property to hidden so when the content overflows the content box vertically (ie: top to bottom), it is hidden and no scroll bars are displayed.

Scroll

Finally, let's take our example and set the overflow-y to scroll to see what happens.

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow-y: scroll; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow-y example, we have set the overflow-y property to scroll so when the content overflows the content box vertically (ie: top to bottom), it is clipped and the vertical scroll bar is displayed.

Share on: