Jobs Hub

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:

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 »