How to Make a DIV Scrollable in Height When Text Over a Maximum Limit

Sometimes, comments or posts in your website might be large enough to occupy almost over a web page to display, this could lead the web page to be biased and unbalanced. So, you need alternative presentation to confine those comments.

Here I introduce is an approach that use DIV to limit the maximum height and let it scrollable if necessary.

HTML Part

In HTML, enclose the comment in a <div>.

<div id='comment'>

Line 1
Line 2
Line 3
Line 4
Line 5

</div>

CSS Part

In CSS, add max-height and overflow-y in the target directive.

div#comment {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid silver;
  padding: 10px;
}

Scrollable Block Example

Let's see the live output.

Line 1
Line 2
Line 3
Line 4
Line 5

That's it.

Leave a Reply

Your email address will not be published. Required fields are marked *