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 >w3wiki</ 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: