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
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.
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).
- widthset - this is because some pages have 100% width and some have less. basically it sets the width of the menu/content area.
- content-contain - I tried setting this up right now to fix this issue. Didn't really help.
- 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
- THE CSS FILE
Thanks in advance for you time, this has really been driving me crazy for the past couple of days.