CSS: Filling blank place under the condition of having fixed heights or widths

The sol开发者_运维问答ution doesn't need to be supported by all browsers.

<div id="page">
  <div id="header">&nbsp;</div>
  <div id="content">&nbsp;</div>
  <div id="footer">&nbsp;</div>
</div>

Let's see. page got width:100%;height:100%. header and content got both width:100% (is this required anyway?), but they got fixed heights, let's say height: 200px and height: 500px. Now I want the footer to fill the rest of the page.

Any solution for that?

Thanks for your help.

---

you could use something like this:

html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

in fact you set position:absolute for #footer and give a value for top 700px; the total height of #header and #content and bottom:0 so will fill the empty space.

Demo: http://jsbin.com/icuza3/2

---

as far as i know css3 can do "Maths" adn simple functions see w3c-specifications , search for "calc" ;)