How to create Scrollable HTML Comment box ?
The purpose of this article is to create a scrollable comment box using HTML and CSS3 property. An HTML scrollbox is a box with expanding scroll bars when the contents of the box are too huge to fit.
Approach: For the scope of this article, we will make a div element that displays the comments, and we will create a scrollable div element. We will create one div with a class of “comment-section“. We will make another divs inside this div which will be used for comment text.
The overflow-y property says the behavior of overflow in the y-axis is vertical. We have to set this to the scroll, so we can make it scrollable.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
main {
padding: 0%;
margin: 5%;
display: block;
min-height: 100vh;
min-width: 100vh;
}
.comment-section {
max-height: 25vh;
max-width: 90%;
background-color: #3f3f3f;
overflow-y: scroll;
}
.comment {
height: 10%;
padding: 2%;
margin: 2%;
background-color: #ffff;
color: black;
}
</ style >
< body >
< h2 >GeeksforGeeks</ h2 >
< main >
< div class = "comment-section" >
< div class = "comment" >
This is first comment.
</ div >
< div class = "comment" >
This is second comment.
</ div >
< div class = "comment" >
This is third comment.
</ div >
< div class = "comment" >
This is fourth comment.
</ div >
< div class = "comment" >
This is fifth comment.
</ div >
< div class = "comment" >
This is sixth comment.
</ div >
</ div >
</ main >
</ body >
</ html >
|
Output:
Last Updated :
11 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...