How can I apply a vertical scrollbar to a div with a percentage height?

Question

I've come across numerous question of the similar nature but my situation is a bit different; my outer container is height 100% instead of a fixed height.

I have a bunch of divs inside a container. They overflow and I want to have a scrollbar to allow scrolling.

This is exactly what I want to achieve: http://jsfiddle.net/jcjw2jmo/

Except, the link I posted has a fixed height: 200px;. I want to have a percentage height instead.

I've tried setting a percentage height and max-height with no luck. Here's my progress: http://jsfiddle.net/k52eh0xr/

How do I get both the fiddles to have the same behaviour but with using percentages instead?

Thanks so much

PS. I know this can be done using Javascript/jQuery but I am looking for a CSS-only solution

score 6 · Accepted Answer · answered Oct 12 '15 at 02:05

6

I think you need set your html and body tag with height:100% so you can use percent like you want

html, body {height:100%}

DEMO

answered Oct 12 '15 at 02:05

Eezo

1,586
2
15
25

score 1 · Answer 2 · edited May 23 '17 at 11:48

The problem you're having relates mostly to using percentage heights in CSS.

If you're going to use a percentage height on a child element, you need to specify the percentage height for all parent elements up to and including the body and root elements (html).

Try this in your code:

HTML (no changes)

CSS

/* NEW */
html, body { 
    height: 100%; /* necessary when using percentage heights within body
                     on non-absolutely positioned children (such as .outer)
                     more info: https://stackoverflow.com/a/31728799/3597276 */ 
    overflow: hidden; /* prevent vertical scrollbar on browser window,
                         in conformance with demos posted in question */
} 

.outer {
    border: 1px solid black;
    height: 50%; /* ADJUSTED */
    /* max-height: 10%; REMOVED */
    overflow-y: scroll;
    width: 300px;
}

.inner {
    /* height: 10%; REMOVED
    max-height: 10%; REMOVED */
}

.item {
    background: grey;
    border: 1px solid red;
    height: 50px;
}

DEMO: http://jsfiddle.net/k52eh0xr/5/

How can I apply a vertical scrollbar to a div with a percentage height?

2 Answers2