Using CSS, how can I make two elements fill window.innerHeight without setting explicit heights?

Question

I've written the following jsfiddle which shows a simple layout with two elements.

http://jsfiddle.net/64kps/RUjj2

HTML

<div id="hello">hello hello hello hello hello hello hello</div>
<div id="donut">donut</div>

JavaScript

var hello = document.querySelector('#hello');
var donut= document.querySelector('#donut');

var resize = function (event) {
    var helloHeight = window.getComputedStyle(hello).height
    helloHeight = helloHeight.replace('px', '');
    helloHeight = parseFloat(helloHeight);

    donut.style.height = (window.innerHeight - helloHeight) + 'px';
};

window.addEventListener('resize', resize, false);
resize();

My Question

The yellow element stays fixed to the top and has a height of whatever it needs dependant on it's content (note that the height is not explicitly specified)

The red element takes the rest of the vertical space available to fill the window.

It's important to note that as the width of the window changes, the heights of both the yellow and red elements change.

I'm wondering if there is any way to achieve this using pure CSS and not having to use JavaScript?

Thanks

Answer 1

To fill the window, set the background of the body tag to the fill color. Your CSS would be:

body {
  background-color: red;
}
#hello {
  background-color: yellow;
  font-size: 50px;
}

No need to set a background color for #donut.

Answer 2

You'll have to give the body or parent div a specific height to achieve this, take a look:

#hello {
 background-color: yellow;
 font-size: 50px;
}
#donut {
 background-color: red;
 height:100%;
}
body{height:1000px;}​

http://jsfiddle.net/hillsons/vqAaE/

Answer 3

here my solution to your problem

hrml:

<div id="asd">
    <div id="hello">hello hello hello hello hello hello hello</div>
    <div id="donut">donut</div>
</div>

css:

#hello {
    background-color: yellow;
    font-size: 60px;
}
#donut {
    background-color: red;
    height:100%;
}
#asd{
    position:absolute;
    height:auto;
    top:0;
    bottom:0;
}

i tested it on ie8+, ff16 chrome 22

fiddle link: http://jsfiddle.net/RUjj2/8/