CSS overflow-y

The CSS overflow-y property is used to control the overflowed content vertically. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; height: 60px;
         overflow-y: auto;}
   </style>
</head>
<body>
   
   <div>
      <h2>The overflow-y Property</h2>
      <p>This is an example of overflow-y property.</p>
   </div>
   
</body>
</html>

Output

The overflow-y Property

This is an example of overflow-y property.

CSS overflow-y Syntax

The syntax of overflow-y property in CSS, is:

overflow-y: val;

The value of val should be any of the following:

auto - Used to wrap the overflowed content using scroll bar
scroll - Used to wrap the overflowed content using scroll bar
visibile - Used not to clip the overflowed content. Rather the overflowed content will gets displayed outside the box from top and/or bottom edge(s). This is the default value
hidden - Used to hide the overflowed content
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS overflow-y Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; height: 60px;
         margin-bottom: 44px;}
      div.a{overflow-y: auto;}
      div.b{overflow-y: scroll;}
      div.c{overflow-y: visible;}
      div.d{overflow-y: hidden;}
   </style>
</head>
<body>
   
   <div class="a">
      <p>This is first para</p>
      <p>This is second para</p>
      <p>This is the last para</p>
   </div>
   <div class="b">
      <p>This is first para</p>
      <p>This is second para</p>
      <p>This is the last para</p>
   </div>
   <div class="c">
      <p>This is first para</p>
      <p>This is second para</p>
      <p>This is the last para</p>
   </div>
   <div class="d">
      <p>This is first para</p>
      <p>This is second para</p>
      <p>This is the last para</p>
   </div>
   
</body>
</html>

Output

This is first para

This is second para

This is the last para

This is first para

This is second para

This is the last para

This is first para

This is second para

This is the last para

This is first para

This is second para

This is the last para

CSS Online Test

« Previous Tutorial Next Tutorial »