Q:

How to Make a DIV Vertically Scrollable Using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  325 
Very Easy
0

How to Make a DIV Vertically Scrollable Using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS overflow-y Property

You can simply use the CSS overflow-y property to make a <div> element vertically scrollable, in a situation where it has a fixed height and its content is larger than the content area.

In the following example the vertical scrollbar will be visible only when the content exceeds the div's content area. Let's try it out to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Making a DIV Vertically Scrollable using CSS</title>
<style>
    .box{
        border: 2px solid #000;
      	padding: 15px;
        overflow-y: auto;
      	height: 200px;
    }
</style>
</head>
<body>
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>
    <p><strong>Note:</strong> Please change the Editor layout/orientation to see how CSS overflow property actually works.</p>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Right Align Flex Item Using CSS... >>
<< How to Hide the Scrollbar on an HTML Page...