split div in two taking all available vertical space

Question

I'm trying to split a div in two side by side divs. I know that has several examples here, but I already searched and not found one that permit that the divs take all available space in vertical, without any content.

Take a look http://jsfiddle.net/kpDDM/3/

Possible duplicate of http://stackoverflow.com/questions/5776367/css-making-a-div-consume-all-available-space — Myra, Jul 16 '12 at 14:58

score 7 · Accepted Answer · answered Jul 16 '12 at 14:57

To set a percentage height to your divs, their parent element must have a specific height. In this case it appears you want it based on the viewport height. To achieve this, every ancestor div must have a height of 100%:

*, html, body, .parent {
    height: 100%;
}

JS Fiddle: http://jsfiddle.net/kpDDM/6/

score 3 · Answer 2 · answered Jul 16 '12 at 14:59

Add   within your div tags. Because they're 100% rather than fixed pixels, they need something inside to make them visible.

If you want to make the div tags 100% of the page, then you need to state the page is 100% (so the div tags understand what 100% is).

* { height:100%; }

Changing the body and html tags to 100% is not necessary.

score 1 · Answer 3 · answered Jul 16 '12 at 14:59

Your parent divider takes a %height even though it's parent container, body, does not have an explicit height amount. This infers that your parent divider overrides with height:auto instead, leaving you without the height you wish.

You'll need to declare a fixed height for parent if you wish for this to work. Modern browsers today do not support default explicit height amounts for the parent body.

Thus, you'll need to make sure you explicitly define your html and body dividers heights like so:

html, body {
    height:100%;
}

Enjoy and good luck!

split div in two taking all available vertical space

3 Answers3