Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Scrollable HTML Comment box ?

  • Last Updated : 30 Jun, 2021

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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :

Start Your Coding Journey Now!