making a scroll div inside another div

[jghoodleehoo]

I have a div inside of a div but I want the inner div to scroll when the content gets larger than the div. I used overflow:auto and set the height of the div to 70% and even used a max-height of 70%.

But, as more content is added to the inner div it just gets taller and taller exceeding the 70% and even exceeding the outer div. How do you do this with relative height?

[Nancy OShea]

Use an explicit height value + overflow:scroll.

#divID {

     height: 100px;

     overflow:scroll;

}

Keep in mind that scrolling divisions are a real pain on mobile devices.  If I had a preference, I wouldn't use them at all.

Nancy O.

[jghoodleehoo]

The problem is I can't specify the height. I need it to be relative.

[Nancy OShea]

That's how you get the scroll bar to appear.  Otherwise the div adjusts normally to content height.

Can I ask why you think you need a scrollbar?

Nancy O.

[jghoodleehoo]

Because the containing div is fixed and so everything that extends beyond the viewport is unaccessable.

[BenPleysier]

If the containing div is the restriction, the you need to place the scrollbar(s) on it and not on the inside container by using overflow:scroll;

[jghoodleehoo]

I tried that but that just scrolls the background (the fixed containing div) while the foreground div stays in place (clipped off screen). I need the foreground to scroll and not the background.

[Jon Fritz]

Do you have the child container set to position:fixed or position:absolute (it shouldn't be)?

That's all I can think of that would cause the child container's content to stay put when you scroll after using Ben's suggestion on the parent container.

As a side note, you may also want to set background-attachment:fixed for your parent container to make sure any background image stays put when scrolling happens.

[Nancy OShea]

Because the containing div is fixed...

Bad idea.

Try something else like this:

jQuery Smooth Scrolling with Fixed Layout

Nancy O.

[HZMD]

This might not be the best solution but max-height: 100vh for the scrolling (fixed) div will restrict its height to the height of the view (window)