You need to assign some height to make the overflow: auto;
property work.
For testing purpose, add height: 100px;
and check.
and also it will be better if you give overflow-y:auto;
instead of overflow: auto;
, because this makes the element to scroll only vertical but not horizontal.
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
If you don't know the height of the container and you want to show vertical scrollbar when the container reaches a fixed height say 100px
, use max-height
instead of height
property.
For more information, read this MDN article.
You have to add max-height
property.
.ScrollStyle
{
max-height: 150px;
overflow-y: scroll;
}
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>
You can set :
overflow-y: scroll;height: XX px
I got an amazing scroller on my div-popup
. To apply, add this style to your div element:
overflow-y: scroll;
height: XXXpx;
The height
you specify will be the height of the div and once if you have contents to exceed this height, you have to scroll it.
Thank you.
To show vertical scroll bar in your div you need to add
height: 100px;
overflow-y : scroll;
or
height: 100px;
overflow-y : auto;
I'm not quite sure what you're attempting to use the div for, but this is an example with some random text.
Mr_Green gave the correct instructions when he said to add overflow-y: auto
as that restricts it to vertical scrolling. This is a JSFiddle example:
JSFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With