WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Make a DIV Vertically Scrollable Using CSS

Topic: HTML / CSSPrev|Next

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...</p>
    </div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates Property Marvels