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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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:
