Set div height to height of browser using CSS ONLY

Question

*I am Making a Layout using CSS ONLY.

and I'm trying to do is have the header div take up a set amount of pixels in height, say 100px but then the content div to take up the rest of the browser window's height.

Ie the browser windows height less the height of the header div.

So HTML is as follows,

<div id="header"></div>

<div id="content"></div>

....and here is the CSS I've got so far.

html, body {margin: 0; padding: 0; height: 100%;}

#header {width: 100%; height: 100px; background-color: #333;}

#content {position: relative; top: 10px; width: 100%; /*height: auto !important;*/  min-height: 100%; background-color: #999; }

I know, because I've done it that this is possible to do with JS/Jquery to set the content div's height based on the height of the browser, but I'd love to know if there's a way of doing this just using CSS.

As you can see from the Fiddle below, the current CSS just makes the content div shoot off the screen at the bottom.

http://jsfiddle.net/PysLY/

Answer 1

I've got this result: http://jsfiddle.net/ZC7BT/

html, body {margin: 0; padding: 0; height: 100%;}

#header {width: 100%; height: 100px; background-color: #333;}

#content {width: 100%; min-height: calc(100% - 100px); background-color: #999; overflow:auto; }