Make div scrollable
I have a div that I am displaying many things in that are related to laptop for filtering data. The div increases it's size as the data size increases in it.
I want the div to remain at a max size of 450px then if data increases scroll will come automatically. The div size should not be increased.
jsfiddle for it.
css :
.itemconfiguration
{
min-height:440px;
width:215px;
/* background-color:#CCC; */
float:left;
position:relative;
margin-left:-5px;
}
.left_contentlist
{
width:215px;
float:left;
padding:0 0 0 5px;
position:relative;
float:left;
border-right: 1px #f8f7f3 solid;
/* background-image:url(images/bubble.png); */
/* background-color: black; */
}
Can anyone help me achieve this?
Use overflow-y:auto
for displaying scroll automatically when the content exceeds the divs set height.
See this demo
use overflow:auto
property, If overflow is clipped, a scroll-bar should be added to see the rest of the content,and mention the height
DEMO
.itemconfiguration
{
height: 440px;
width: 215px;
overflow: auto;
float: left;
position: relative;
margin-left: -5px;
}
I know this is an older question and that the original question needed the div
to have a fixed height
, but I thought I would share that this can also be accomplished without a fixed pixel height
for those looking for that kind of answer.
What I mean is that you can use something like:
.itemconfiguration
{
// ...style rules...
height: 25%; //or whatever percentage is needed
overflow-y: scroll;
// ...maybe more style rules...
}
This method works better for fluid layouts that need to adapt to the height of the screen they are being viewed on and also works for the overflow-x
property.
I also thought it would be worth mentioning the differences in the values for the overflow
style property as I've seen some people using auto
and others using scroll
:
visible = The overflowing content is not clipped and will make the div
larger than the set height
.
hidden = The overflowing content is clipped, and the rest of the content that is outside the set height
of the div
will be invisible
scroll = The overflowing content is clipped, but a scroll-bar is added to see the rest of the content within the set height
of the div
auto = If there is overflowing content, it is clipped and a scroll-bar should be added to see the rest of the content within the set height
of the div
See also on MDN for more information and examples.