Question

I have a centred fixed width content div, and if there isnt enough content (ie, an small error page) the height of it is smaller than the height of my web-browser.

This leaves the footer in the middle of the screen, the and the background of the content div not continued to the bottom. Just looking like shit.

Is there a way to force the content div to always fill the screen, if it’s contents are smaller than the current screen?

I realize this might have to use javascript, but I’m not very acquainted with it.

edit: If the user re-sizes the window, I’ll want it to update as-well.

edit: It looks like I can use the window.innerWidth, window.innerHeight properties

Answer 1

Sounds like what you want is a sticky footer, not a resize of the body.

Check out Ryan Fait’s great tutorial on how to do this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Here’s a demo of it in action: http://ryanfait.com/sticky-footer/