footer height 100% on vertically centered page.

Question

http://www.stuartflake.com is the site that I am working on. The footer element contains the menu, the background is gray. The content of the page is centered vertically by div#position

the css for this is

#position { text-align:center; position:absolute; top:50%; left:0; width:100%; height:1px; display:block; }

My problem is that I would like the gray footer to have a dynamic height, so that the gray always extends to the bottom (no,not a "sticky" footer). Any thoughts how this could be done?

A css solution is preferred, however a jQuery solution is also valid.

thanks

Answer 1

It's not a perfect solution, but you can "fake" it by manipulating the body:

background:#E7E8E4;
border-top:300px solid #F6F6F6;

And then add this to #wrapper:

background:#F6F6F6;

This will fail if the user has a really high screen though (having more than 300px margin from top to content).

Answer 2

I am not sure if this is what you ask, but you can change #wrapper top:-325px to top:-200px