[Solved] How do I set a correct variable height on a DIV?

Hi There,

I've been making a site for a while now, but one layout issue still eludes me. The page fills the browser window using a mix of min-height:100%, and height:100% (as per http://www.communitymx.com/content/article.cfm?cid=BAD95), and works well for me. The basic html is thus:

The layout styling is thus:

html, body { height: 100%; margin: 0; }
#container { min-height: 100%; background: #003355; }
#logo_area { background: #dd6900; }
#mainmenu { background: #ff9900; }
#submenu { background: #dd6900; }
#content { background: #ff9900; height: 100%; }
#footer { background: #dd6900; margin: 0; }
#logo_area p, #mainmenu p, #submenu p, #content p, #footer p { margin: 0; padding: 0; }

#container {
height: 100%;
}

The logo_area, mainmenu, submenu and footer are effectively fixed in height, but sized dynamically by the browser to accommodate user text size changes. The content area is however very variable in its height. The result I would like is for when there is less content such that the overall page content is less than the area of the window, the footer will still appear at the bottom of the window. To achieve this, I thought it would simply be a case of assigning the style #content { height:100%}. However, i've come to realise that a 100% height is the height value of the parent, not the available height left inside the parent.

So my question is, how do I make the content DIV's height parameter equal to the available space left, after placing the logo_area, mainmenu, submenu and footer?

Hope that all makes sense, and thanks for any suggestions
Cheers
salukibob