Making a footer div expand its height 100% on browser window resize

Hello Everyone,

I'm currently working on a portfolio for my own work and have ran into a slight problem with my footer.

It seems the div which I have created does not want to expand too 100% and resize with the browser window.

If anyone could take a moment to look at my code on this test page http://www.kickstartstudios.com/test/ I would be most appreciative.

Thanks for taking the time to help!

-Matt

#328061

Looks fine in Firefox and IE seeing as you are using a fixed layout instead of a fluid layout.

#328088

yea, firefox is teh sh*t. works on firefox for me.

#328090

It scales horz 100%, I want it to scale vertically... so when you increase the size of the browser the footers bg shows as the dark grey and not white

#328092

The best technique right now is "FooterStickAlt" by TheManInBlue - Google it.

This technique is a cross-browser method of making a footer stay at the bottom of the window if the content doesn't reach all the way down. Once there's enough content, the footer falls into the regular scrolling document flow.

TheManInBlue's variation on this should work in all major browsers.

And the CSS for it is so simple, it actually makes perfect sense when you read the style rules!

#328126

Set the background color of your container to white.

then set the body background color to the dark grey.

by the way, I just barely glanced over the html,

but that should work, and also you could bump that doctype up to 1.1..

#328127

Thanks for all the help everyone, I'll give your methods a go.

[update] The FooterStickAlt method worked perfectly, thanks for the help!

#328183