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?

set a fixed width then add `overflow-y:scroll` to that div:) — NoobEditor, Jan 20 '14 at 06:12
Possible duplicate of [Making a div vertically scrollable using CSS](https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css) — Organic Advocate, Sep 20 '17 at 17:46

score 126 · Accepted Answer · answered Jan 20 '14 at 06:14

126

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

See this demo

answered Jan 20 '14 at 06:14

Zword

6,605
3
27
52

And I want to place button at the end of div if data exist or not ? what to do for that ? – user3145373 ツ Jan 20 '14 at 06:33
@user3145373 can you tell in detail what you want – Zword Jan 20 '14 at 06:35
1

Sir data listed of configuration in that div and at the end filter button is there, so I want that if there is data or not in that div but the button should always at bottom of the div. Suppose there's only 2 data like RAM and processor so button will come very upside, I want that button will remain at bottom of the div at last if there's no data there. – user3145373 ツ Jan 20 '14 at 06:41
@user3145373 i will post a fiddle later today.Do check for it – Zword Jan 20 '14 at 06:45
1

If I got correctly what you are asking then this may help you http://jsfiddle.net/7w8TC/4/ .In this fiddle i have wrapped the part inside form excluding submit button with a div whose **min-height is 100%**. So the container will push the submit button to the bottom even if the list is empty/or less items – Zword Jan 20 '14 at 06:55
1

Yes that's I want, thanx. – user3145373 ツ Jan 20 '14 at 07:01

score 15 · Answer 2 · answered Jan 20 '14 at 06:25

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

score 14 · Answer 3 · edited May 18 '21 at 13:28

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.

actually this is wrong. i have divs set to hidden and it stretches vertically beyond belief. in fact i actually need it to not stretch and give me a vertical scroll bar but there is no setting that will allow it. ppl are using java and all kinds of things to accomplish it. its amazing that something so simple is so "hard" to accomplish. im assuming it has something to do with the div being wrapped and the browsers ignoring certain settings — user2585548, Jul 05 '16 at 01:00

score 6 · Answer 4 · answered Jan 20 '14 at 06:22

6

You need to remove the

min-height:440px;

to

height:440px;

and then add

overflow: auto;

property to the class of the required div

answered Jan 20 '14 at 06:22

Saurabh

1,007
2
10
24

And I want to place button at the end of div if data exist or not ? what to do for that ? – user3145373 ツ Jan 20 '14 at 06:35
@user3145373 do you want this functionality [JSFiddle demo](http://jsfiddle.net/mayekarsaurabh/7w8TC/3/)----- – Saurabh Jan 20 '14 at 06:49

score 5 · Answer 5 · edited Feb 04 '20 at 11:15

5

Place this into your DIV style

overflow:scroll;

edited Feb 04 '20 at 11:15

BuZZ-dEE

6,075
12
66
96

answered Jan 20 '14 at 06:13

johnpili

688
6
9

hafootnd · Answer 6 · 2022-06-22T14:17:35.127

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)

score 1 · Answer 7 · edited Feb 04 '20 at 11:15

1

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;

edited Feb 04 '20 at 11:15

BuZZ-dEE

6,075
12
66
96

answered Jan 20 '14 at 06:17

Manoj Sharma

596
1
6
23

score 1 · Answer 8 · answered Jan 20 '14 at 06:26

1

You should add overflow property like following:

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

answered Jan 20 '14 at 06:26

Afnan Ahmad

2,492
4
24
44

And I want to place button at the end of div if data exist or not ? what to do for that ? – user3145373 ツ Jan 20 '14 at 06:34
@user3145373 you can place button at the end of the div.Are you asking about how to place button ? or are you asking about how to check whether your data exits in div or not. Your question is not clear. – Afnan Ahmad Jan 20 '14 at 06:39
yes I am talking about to place button at the bottom of the div. – user3145373 ツ Jan 20 '14 at 06:42
@user3145373 `` . You can place button where you want in div. – Afnan Ahmad Jan 20 '14 at 06:44
no no no, in fiddle check filter button is there, I want to place at end of div whether list data exist or not in that. – user3145373 ツ Jan 20 '14 at 06:47
@user3145373 how are you binding data ? Are you hard coding ? You can check this at button onClick event through javascript or jQuery – Afnan Ahmad Jan 20 '14 at 06:51

Make div scrollable

8 Answers8

See this demo

Linked