Scroll doesn't work inside multiple divs

Question

Please help me with this

<div id="parent">
    <div id="banner"></div>

    <div id="childsparent">
    <div id="child">
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
    </div>
    </div>
</div>

#parent {
    background: #CCC;
    width:200px;
    height:500px;
}

#banner {
    width:200px;
    height: 50px;
    background: #ff0000;
}

#childsparent {
    overflow:scroll;
}

I need to make it scrollable but parent div must be of its height for example 500px.

I know it works when there is only parent and child, but when there is multiple div it is overflowing div and scroll doesnt work. How to make this work?

score 0 · Answer 1 · answered Jun 26 '14 at 19:22

0

Here is updated jsfiddle with working example http://jsfiddle.net/5xXwQ/1/

#parent {
        background: #CCC;
        width:200px;
        height:500px;
        overflow: hidden;
    }

#childsparent {
    height: 500px;
    overflow:scroll;
}

answered Jun 26 '14 at 19:22

Grissom

1,080
8
21

Thanks I know that solution work when I set height of px .... also on jsfiddle works when I set there 100% but in my template % doesnt seem to work ... I have to search what it is... .. thanks anyway – user3780666 Jun 26 '14 at 19:27
It works in jsfiddle because you have parent element which has size in pixels and thad browser can deside what is 100%. Also you can add parent element. – Grissom Jun 26 '14 at 19:38

score 0 · Answer 2 · answered Jun 26 '14 at 19:26

0

Adding height:450px; to #childsparent will give you the behavior you're looking for.

answered Jun 26 '14 at 19:26

Andrew Clody

1,171
6
13

score 0 · Answer 3 · answered Jun 26 '14 at 19:29

http://jsfiddle.net/5xXwQ/7/

#parent {
        background: #CCC;
        width:200px;
        height:550px;
    }

    #banner {
        width:200px;
        height: 50px;
        background: #ff0000;
    }

    #childsparent {
        overflow:scroll;
            height:500px;
    }

score 0 · Accepted Answer · answered Jun 26 '14 at 19:30

0

First, I would put overflow:hidden; on #parent, but you will still have a really tall #childsparent. You have to restrict the #childsparent. If you know for certain the parent will be 500px tall and #banner will be 200px, then set:

#childsparent {
    [...]
    height:300px; /*or*/
    max-height:300px;
}

If #childsparent were the only child of #parent then just #childsparent { ... height:100%; }. Otherwise, if you won't know the size of #banner then pull out some Javascript to do the math.

answered Jun 26 '14 at 19:30

Phil Tune

3,154
3
24
46

That last sentence is exactly what I am looking for... I need to set height to fullfill parent, because I wont have only one scrollable element on page and dont want to make for every one new css height value. What javascript should I use? Thank :) – user3780666 Jun 26 '14 at 19:37
@user3780666 Do some Google searches for jQuery.height(), or take a look at http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element – Phil Tune Jun 26 '14 at 19:41

Scroll doesn't work inside multiple divs

4 Answers4