Skip to content
Home » Web » CSS » CSS DIV Scrollable Vertically

CSS DIV Scrollable Vertically

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 DIV Block

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

<div id='comment'>
Line 1
Line 2
Line 3
Line 4
Line 5
</div>

CSS Scrollable

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;
}

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 *