How to create Scrollable HTML Comment box ? Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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"> <title>Comment Section</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } h2 { text-align: center; color: green; margin-top: 20px; margin-bottom: 20px; } main { padding: 0; margin: 0 auto; max-width: 80%; min-height: 80vh; } .comment-section { max-height: 50vh; max-width: 100%; background-color: #3f3f3f; overflow-y: auto; border-radius: 8px; padding: 10px; } .comment { padding: 10px; margin-bottom: 10px; background-color: #ffffff; color: black; border-radius: 5px; } .comment:last-child { margin-bottom: 0; } </style> </head> <body> <h2>GeeksforGeeks</h2> <main> <div class="comment-section"> <div class="comment"> This is the first comment. </div> <div class="comment"> This is the second comment. </div> <div class="comment"> This is the third comment. </div> <div class="comment"> This is the fourth comment. </div> <div class="comment"> This is the fifth comment. </div> <div class="comment"> This is the sixth comment. </div> </div> </main> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create Scrollable HTML Comment box ? J jymnjogiya Follow Improve Article Tags : Web Technologies HTML CSS-Properties CSS-Questions Similar Reads How to Add Horizontal Scroll Bar in HTML Table? When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpa 3 min read How to Get the Content of an HTML Comment using JavaScript ? In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl 3 min read Blaze UI Scrollable content Model Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to c 3 min read How to create Flex Box Container with Scrollable Content in Bootstrap 5? Bootstrap is a framework that is suitable for mobile-friendly web development. It means the code and the template available on Bootstrap apply to various screen sizes. It is responsive for every screen size.A Flexbox container with scrollable content typically involves using the flex utility classes 3 min read How to create content area scrollable instead of the page using CSS ? Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below. visible: The property indicates that it can be rendered outside the block box and it is not clipped.hidden: This property indicates that the over 7 min read How to create sticky table headers in Chrome ? Sticky table headers are a useful feature in web design, allowing the header of a table to remain fixed at the top of the viewport while the user scrolls through the table's content. This enhances navigation, especially in tables with large datasets, making it easier to track column titles.ApproachH 2 min read How to Add Scroll Bar in HTML? In HTML and CSS, scrollbars can allow users to navigate through the overflowed content within the specified area. They can appear when the content overflows the visible area of the element, such as the <div>, allowing users to scroll horizontally or vertically. we are going to add the scroll b 7 min read How to make Draggable and Scrollable Modal in Bootstrap? Given an HTML document and the task is to create a bootstrap modal that can be scrolled and dragged on a mobile device. This task can be easily achieved using the "Scrolling long content" models available in the Bootstrap library.Approach: Modals are built with HTML, CSS, and JavaScript. They are po 2 min read How to Create Scrollable Horizontal Menu using CSS? The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.Syntaxwhite-space: nowrapoverflow: auto;HTML<!DOCTYPE html> <html> <head> <style> div.scrollmenu { b 1 min read How to make vertical scrollable rows in bootstrap? In Bootstrap, creating vertically scrollable rows allows for efficient display of large content within a limited space. By enabling vertical scrolling, users can view content that exceeds the visible area without altering the overall page layout, improving usability.It can be done by the following a 2 min read Like