Bottom align with CSS?

[J0nny]

Hey there, this has been bugging me for quite a while. It's the sort of problem where I have a solution for either or, but not both. My new website has a footer, which is placed at the bottom of the content. I need the footer to be positioned at the very bottom of the user's screen IF the content isn't longer than the screen. If the content IS longer than the users screen, the footer should be at the bottom of the content.
If the content is shorter than the users screen, a simple


position: fixed;
bottom: 0px;

works just fine. However, as soon as the content becomes longer than the screen, the footer remains at the bottom of the browser, cutting off the content. To fix this, I have to do a


display: table;
vertical-align: bottom;

However, as soon as the page becomes shorter than the users screen again, it sits at the bottom of the content, not the bottom of the screen. I hope I've been clear, I'll admit it is a bit confusing.
I'm wondering if there is a CSS solution to this, so I don't have to rely on doing a nasty JavaScript hack to check the content height and users screen height. Don't worry about it working in IE/Netscape, I don't really care about that. Firefox and Opera are a must though :P

Regards, J0nny.

[Wickham]

I've played around with that myself but haven't found a satisfactory answer.

First, older browsers don't support position: fixed, so you won't be able to stop IE6 scrolling the footer which will be treated as position: absolute.

If you have a footer which is say 50px high, then make your container for the rest of the page have a margin-bottom of 50px as this will leave a space for the footer so that when you scroll the full amount the bottom of the containing div won't be covered by the footer.

See
http://www.wickham43.supanet.com/tutorial/headerfooterfix.html
which is the best I can do without using a hack.

If you want to risk a hack (which works in IE6, IE7, Firefox, Opera and Safari for Windows which covers the most popular browsers) see
http://www.wickham43.supanet.com/tutorial/headerfooterfixexample.html

which fixes a header and footer to the top and bottom of the viewing window.

Neither of the above will move the footer up from the bottom of the window if the rest of the page has very little content (except IE6 which just puts the footer under other content all the time with my first example). I think you would have to use javascript as you describe, but I think that would only work with the default screen resolution of a viewer's computer, not if he changed the window size away from his default screen resolution just before or after downloading your page.