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?
27 Answers
Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.
See this demo
6use overflow:auto property, If overflow is clipped, a scroll-bar should be added to see the rest of the content,and mention the height
.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.
2You need to remove the
min-height:440px;to
height:440px;and then add
overflow: auto;property to the class of the required div
2Place this into your DIV style
overflow:scroll;You should add overflow property like following:
.itemconfiguration { height: 300px; overflow-y:auto; width:215px; float:left; position:relative; margin-left:-5px; }use css overflow:scroll; property. you need to specify height and width then you will be able to scroll horizontally and vertically or either one of two scroll by setting overflow-x:auto; or overflow-y:auto;
