Make Div Scrollable

Question

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?

Accepted Answer

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.

Must Read

See this demo

Answer 2

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

Answer 3

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.

Answer 4

You need to remove the

min-height:440px;

to

height:440px;

and then add

overflow: auto;

property to the class of the required div

Answer 5

Place this into your DIV style

overflow:scroll;

Answer 6

You should add overflow property like following:

.itemconfiguration
    {   
        height: 300px; 
        overflow-y:auto;
        width:215px;
        float:left;
        position:relative;
        margin-left:-5px;
    }

Answer 7

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;

Make Div Scrollable

7 Answers

Must Read

See this demo

David Miller