2 replies [Last post]
salukibob
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-02-16
Posts: 8
Points: 0

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:

Logo Area

Content

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The normal method in use now

The normal method in use now is to place the footer after #container with a fixed height and a negative top margin equal to that height which drags the footer back on to the screen , If you check the 'how to' section of the forum there is a post relating to footer issues along with a link to this technique described.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

salukibob
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-02-16
Posts: 8
Points: 0

Thats great, thanks for the

Thats great, thanks for the pointer. The footerStickAlt method is exactly what I needed.

Thanks again,
salukibob