Web developers use HTML components, such as headers and footers, nav, div, image, and many others to divide a web page and embed content. More specifically, the “<div>” element is a popular HTML component that provides an easy way to divide a page into sections. Some users desire to make the “<div>” components vertically or horizontally scrollable to conserve webpage space.
This post will demonstrate the method for making a vertically scrollable div by utilizing CSS.
How to Make/Create a div Vertically Scrollable With CSS?
To create a vertically scrollable div by utilizing CSS, follow the given instructions.
Step 1: Add Heading
First of all, add a “<center>” tag for adding data in the center of the page. Then, insert the heading by utilizing the “<h1>” tag.
Step 2: Create a div Container in HTML
After that, create a “<div>” container and assign the class named “scroll-div”. After that, add some text or a paragraph in between the <div> tags:
<h1>Linuxhint Website</h1>
<div class="scroll-div">Linuxhint is a popular website for content creation. it has built many products to help you learn about Linux, Programming, Computer Science, and more. This platform provides work on different categories, including HTML/CSS, javascript, Git, Windows, Dockers, Discord, and many others. It provides a complete guide about these categories. Users can find any topic related to the mentioned category. In this situation if you are a beginner, you may refer to guidelines for writing an article.
</div>
</center>
Output
Step 3: Style Heading
Access the heading element by specifying the tag name in between the <style> tags. Then, apply the “color” property to set the heading color:
color:rgb(81, 173, 226);
}
It can be observed that the heading color has been changed:
Step 4: Make div Scrollable
Next, use the “.scroll-div” class to access the HTML <div> element and apply the following CSS properties:
padding:5px;
margin:5px;
background-color: rgb(179, 180, 233);
width: 400px;
height: 120px;
overflow-y: auto;
overflow-x: hidden;
text-align:justify;
}
In the above code, the following properties of CSS has been applied:
- “padding” is set as “5px” to allocate the space inside the div element.
- “Margin” is set as “5px” for creating space outside the div boundary.
- “background-color” attribute allocates the color of the element on the background.
- “width” specifies a container size in width.
- “height” attribute allocates the height of the element.
- “overflow-y” is used to make the element scrollable by setting its value as “auto”:
- “overflow-x” is set as “hidden” to make the div vertically scrollable only.
- “ text-align” is utilized for text alignment. For instance, we have aligned the text as “justify”.
It can be observed that we have successfully made the div vertically scrollable:
We have stated the method for making the div vertically scrollable using CSS.
Conclusion
To make a div vertically scrollable using the CSS, first, create a div with a class attribute. The class attribute is used to access the “div” element. Then, set the CSS “overflow-x” property as “hidden” and the “overflow-y” property as “auto” on the class attribute to make the div element vertically scrollable. This tutorial has demonstrated the method for making the div vertically scrollable using CSS.
