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/

Answer 1

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/