dcolumbus dcolumbus - 5 months ago 32
CSS Question

Set height content, footer that extends the rest of the browser height

So I know the first thought is "Sticky Footer", but that's not really the case. It's the footer height that's the variable.

I have a page where the main content is 200px margin from the top... after the content, I need the footer to extend all the way down for the remainder of the browser height; there will be a 1600px background image that will



Here's one trick. Make your header, content, and footer as you normally would. Set the height of the footer to 100% and give it the position:fixed attribute, and make sure that you don't give it a top, bottom, etc. attribute. This will take the footer "out of flow" but leave it right where it would be naturally (this removes any ugly scroll bars).

you can see it in action in the example demo here.