How to create Scrollable HTML Comment box ?
The purpose of this article is to create a scrollable comment box using HTML and CSS3 property.
Approach: For the scope of this article, we will make a div element that display 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 behaviour of overflow in y-axis is vertical. We have to set this to the scroll, so we can make it scrollable.
HTML code:
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:
Please Login to comment...