Open In App

How to create Scrollable HTML Comment box ?

Improve
Improve
Like Article
Like
Save
Share
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">
</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:



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads