Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create Scrollable HTML Comment box ?

Improve Article
Save Article
  • Last Updated : 30 Jun, 2021
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!