We have a site built using XHTML transitional. We need a footer div to sit at the bottom of the
page, even when the content doesn't reach the bottom fold, so basically the body DIV which comes
before it in the code needs to have a height of 100% to push it down.
As far as I am aware height:100% is not supported in XHTML, at any rate it isn't working. We can
make a background image tile the screen to give the appearance of the content stretching to the
bottom, but the footer still needs to sit at the bottom of the browser, so it doesn't solve the
problem. I have also tried absolutely positioning the footer at the bottom, but this sits at the
bottom of the fold, not the bottom of the content, so when your content stretches below the fold the
footer stays on top at the bottom of the screen, sitting on top of the content.
I was wondering if anyone else has tackled this problem before, and if so could you send me a link
or explain your solution. Would really appreciate any advice. I hope I have made myself clear!
Example of code:
content needs to have a height of 100%
footer links need to sit at the bottom of the page even if the content doesn't stretch the
height of the browser window.
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/