Single Column Layout - Contents height

HTML & CSS
1

I’m trying to make a single column layout with header, footer & contents. Simple right? I need the footer to stick to the bottom and the contents to always fill the space between the header and footer. I’ve tried a few from the web and my own, but I have not been able to get the middle contents to fill all the space between the header and footer. It will only grow to the size of what’s in it. I need it to fill the space even if it is empty.

The only way I’ve been able to make it work is to hook the page load and resize and resize the div with javascript. (height = window height - footer height - header height)

Could somebody point me to a layout that has this feature or share some techniques that might help?

Thanks!
Andy

2

The best resource on the web for sticky footers is here:

In terms of the content area filling the space, probably the best idea is to ‘fake it’, by having a background color or image behind the content area that makes it appear to be full height. A common method is to use faux columns.