css layout question: a height 100% div with two fixed height divs

Question

Here is the HTML code:

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

And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:

html,body
{
 min-width:800px;
 max-width:1680px;
 width:100%;
 height:100%
}
#header
{
  width:100%;
  height:100px;
  background:#CCCCCC url(images/header_bg.gif) repeat-x; 
}
#footer
{
  width:100%;
  height:10px;
}
#container
{
 width:100%;
 height:100%-100px-10px;   /* I want #container to take all the screen height left */
}

is it possible to only use CSS for achieving some layout like this: the whole body will fit the screen size always, however the #header and #footer areas are with fixed height, and then the main div takes all the height left. Thanks!!

Answer 1

Something like this? http://limpid.nl/lab/css/fixed/header-and-footer or you don't want the main content to scroll?

Answer 2

something like this: http://ryanfait.com/sticky-footer/ might also be what you are looking for