Reputation: 8146

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?

Upvotes: 113

Answers (8)

hafootnd

Reputation: 118

To further clarify, you can use overflow: scroll or overflow: auto. They'll both work!

"The auto value is similar to scroll, but it adds scrollbars only when necessary" (source)

You can also further specify which direction you want to control overflow in, and which direction you want the scrollbar to appear by doing overflow-y: scroll (top/bottom) or overflow-x: scroll (left/right). If you use the generic overflow property, it will overflow in both x and y directions if needed.

"You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box." (source)

Upvotes: 5

care7289

Reputation: 191

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.

Upvotes: 19

Manoj Sharma

Reputation: 616

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;

Upvotes: 1

john

Reputation: 696

Place this into your DIV style

overflow:scroll;

Upvotes: 5

Afnan Ahmad

Reputation: 2542

You should add overflow property like following:

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

Upvotes: 1

Manoj

Reputation: 1890

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

Upvotes: 16