The solution doesn't need to be supported by all browsers.
<div id="page">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </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.