How to create Scrollable HTML Comment box ?

Last Updated : 25 Jul, 2024

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:

How to create content area scrollable instead of the page using CSS ?

jymnjogiya

Improve

Article Tags :

How to create Scrollable HTML Comment box ?

Similar Reads

Thank You!

What kind of Experience do you want to share?