CODEWITHSUNDEEP
csshtmlscroll
Salman Virk
Salman Virk

Reputation: 12307

How to show scroll after certain height but height should not be fixed?

I have a div with following style: height:250px;scroll:auto;. I want it to scroll after 250 px but should have height according to the content in it.

For example, if the content in it is 100px, then, the height of div should be 100 without scroll. But, if the height exceeds 250px, it should show scroll.

How can do it?

Upvotes: 33

Views: 100523

Answers (5)

MikhailRatner
MikhailRatner

Reputation: 592

For those trying to make a scrollable <table> with Bootstrap 5:

The accepted answer does not work on (or inside) of it.

.dyn-height {
    max-height:250px;
    overflow-y:scroll;
}

You have to add the class to a surrounding div element like this

<div class="dyn-height">
  <table>
    ...
  </table>
</div>

Upvotes: 0

Mazen Mohsen
Mazen Mohsen

Reputation: 1

just try max-height and do overflow-y:scroll just it

.hidden {
width:100px;
max-height:250px;
overflow-y:scroll;

}
<div class="hidden">

<h5>If the content in this div exceeds 250px it should appear a scroll bar</h5>

</div>

Upvotes: 0

TV-C-1-5
TV-C-1-5

Reputation: 714

Use overflow-y with the auto option. This way the scroll bar will not show up until it is needed. Otherwise the scroll bar will display, even if you do not need it to show.

 .my_div {
        width:100px;
        max-height:250px;
        overflow-y:auto;
    }

Upvotes: 13

mylesagray
mylesagray

Reputation: 8869

Is this what you are after?

Demo

CSS:

.dyn-height {
    width:100px;
    max-height:250px;
    overflow-y:scroll;
}

height: optional - just for the demo.

Upvotes: 48

Mauro
Mauro

Reputation: 599

try this: max-height should do the trick.

html

<div class="height">
    blah<br/>
    blah<br/>
</div>

css:

.height { max-height:250px; border:1px solid red; overflow:auto; }

Upvotes: 21

Related Questions