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...