Scribd
Upload
11 views

Making A Div Vertically Scrollable Using CSS

Uploaded by

luisfdelacruzrojas2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Making A Div Vertically Scrollable Using CSS

Uploaded by

luisfdelacruzrojas2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Making a div vertically scrollable using CSS

Sabya_Samadder

 Read
 Discuss
 Courses
 Practice
Making a div vertically scrollable is easy by using CSS overflow property. There are different values in
overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden;
and overflow-y:auto;. It will make vertical and horizontal scrollable bar and the auto will make only
vertically scrollable bar.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that
will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div
will be vertically scrollable.
Example 1:
 html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:Green;

div.scroll {

margin:4px, 4px;

padding:4px;

background-color: green;

width: 500px;

height: 110px;

overflow-x: hidden;

overflow-y: auto;

text-align:justify;

</style>

</head>

<body>

<center>
<h1>GeeksforGeeks</h1>

<div class="scroll">It is a good platform to learn programming.

It is an educational website. Prepare for the Recruitment drive

of product based companies like Microsoft, Amazon, Adobe etc with

a free online placement preparation course. The course focuses

on various MCQ's & Coding question likely to be asked in the

interviews & make your upcoming placement season efficient and

successful. Also, any geeks can help other geeks by writing

articles on the GeeksforGeeks, publishing articles follow few

steps that are Articles that need little modification/improvement

from reviewers are published first. To quickly get your articles

reviewed, please refer existing articles, their formatting style,

coding style, and try to make you are close to them. In case you

are a beginner, you may refer Guidelines to write an Article

</div>

</center>

</body>

</html>

Output:
Example 2: In this example use auto in place of overflow-x:hidden; and overflow-y:auto; to make div
vertically scrollable.
 html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:Green;

div.gfg {

margin:5px;

padding:5px;

background-color: green;

width: 500px;

height: 110px;

overflow: auto;

text-align:justify;

</style>

</head>

<body>

<center>
<h1>GeeksforGeeks</h1>

<div class="gfg">It is a good platform to learn programming.

It is an educational website. Prepare for the Recruitment drive

of product based companies like Microsoft, Amazon, Adobe etc with

a free online placement preparation course. The course focuses

on various MCQ's & Coding question likely to be asked in the

interviews & make your upcoming placement season efficient and

successful. Also, any geeks can help other geeks by writing

articles on the GeeksforGeeks, publishing articles follow few

steps that are Articles that need little modification/improvement

from reviewers are published first. To quickly get your articles

reviewed, please refer existing articles, their formatting style,

coding style, and try to make you are close to them. In case you

are a beginner, you may refer Guidelines to write an Article

</div>

</center>

</body>

</html>

Output:

You might also like