Issue with 100% div height

[JoelC]

My content area currently scales the page down if the content overflows from it. This is great, and exactly what I want.

The issue is that when the content doesn't reach the footer, the div's height only matches it's content. I want it to reach the footer at all times (this means it has to be 100% of the page-container div - see diagram below).

All divs from #content and up to #page-contain have their min-height and height set to 100%. The only way I've managed to actually change the height of the div to a set height (not in percentage) and add overflow:hidden - neither of which I want, as the page should scale with resolution.

Basically, I want my content div (with its light grey background) to always scale down until it reaches the footer - even when the content isn't enough to reach it. (it should also move the footer down when the content is more than enough).

----------------

I've got a rather complicated site set up, with a whole bunch of divs and div containers. I've got them all there for a reason, so there are only 1 or 2 of these which I can maybe get rid of.

I'll try to lay it out for you.


page-container - contains everything except the footer (raised with a negative margin for the footer).

header
widthset - this is because some pages have 100% width and some have less. basically it sets the width of the menu/content area.

menu
content-contain - I tried setting this up right now to fix this issue. Didn't really help.

content



footer - (outside the page-container div)


I have colored the divs in my site so you can better understand where everything is, the colors are: #page-contain #widthset #content-contain, while #content remains it's natural light grey.

Check the "about" page and click on the headers. They will scale down and show you how the site currently responds to overflow.

Here are links for your comfort:


THE WEBSITE (http://www.joelfolio.com)
THE CSS FILE (http://www.joelfolio.com/main.css)



Thanks in advance for you time, this has really been driving me crazy for the past couple of days.

[Wickham]

I can show you two examples:-
http://www.wickham43.net/fullheightdiv.php
where a div background extends full height

and items 16, 18 and 19 here which are more complicated (designed for pages without a sticky footer although you could add one):-
http://www.wickham43.net/firefoxbackground.php

and then there are "sticky footer" options with two main types:-
one where the footer is always visible and the content scrolls behind it if there is lots of content or it sticks to the bottom if there is little content (doesn't work in IE6), item 1a in link below

and another where the footer is either at the bottom of a page which has little content or sits below a page with lots of content and scrolls normally (so this is best for pages with not much content as it also works in IE6) item 1b in link below
http://www.wickham43.net/headerfooterfix.php

This example has a sticky footer type 1b which would stick to the bottom if there was much less content on the right, but combines a method of extending column backgrounds full height.
http://www.wickham43.net/backgroundsfullheight2col.html