WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Content DIV height to 100% MINUS a 45px header

Reply
  Thread Tools Display Modes
Old 30th October 11, 09:23 PM   #1
Aeacus
WLC Member
 
Aeacus's Avatar
 
Join Date: Oct 2011
Location: The Netherlands
Posts: 3
Default Content DIV height to 100% MINUS a 45px header

Greetings.

I've made several attempts to fix the next issue, without any positive results so far. I'm quite sure this must have been solved somewhere on the internet, but I've so far failed to find a thread solving this specific issue.

The page concerned can be found here. Please don't mind its sloppy design, it's still in an early stage of development.
As you can see, there's a header (#header, black banner) with a height of 100%, as well as a content section (#content, blue dashed border). Both are divs inside a div called #container, of which its function is obvious, I think.

I'd like to scale up #content to fill the rest of the page. However, when the actual content of #content () requires more space, the div should expand similar to min-height. When I simply apply min-height: 100%; to #content, the div will obviously cause an overflow which I'd like to avoid.

I don't expect anyone to write a full-featured stylesheet, but I'd truly appreciate it if anyone could give me a hint or a decent tutorial to get me going.

Thank you in advance!

Last edited by Aeacus; 30th October 11 at 11:16 PM.
Aeacus is offline   Reply With Quote
Old 30th October 11, 11:17 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Content DIV height to 100% MINUS a 45px header

Why not just use min-height then?

It is supported by all current browsers
chrishirst is offline   Reply With Quote
Old 30th October 11, 11:58 PM   #3
Aeacus
WLC Member
 
Aeacus's Avatar
 
Join Date: Oct 2011
Location: The Netherlands
Posts: 3
Default Re: Content DIV height to 100% MINUS a 45px header

Quote:
Originally Posted by chrishirst View Post
Why not just use min-height then?
This will cause #content to overflow at the bottom of the page. I applied min-height right now, to visualize what I mean. Notice the scrollbar, which is something I'd like to avoid unless there's actual content causing it.

None the less, thanks for your consideration!
Aeacus is offline   Reply With Quote
Old 31st October 11, 12:18 AM   #4
Aeacus
WLC Member
 
Aeacus's Avatar
 
Join Date: Oct 2011
Location: The Netherlands
Posts: 3
Default Re: Content DIV height to 100% MINUS a 45px header

I 'fixed' the issue by just removing #content, so both #header and the actual content are directly within #container. I gave the #header an absolute position and #container a top-margin of 45px, to push the content down to compensate for the header.
I'm not proud of it, but at least this fixes my issue for now (or actually removes it).
Aeacus is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:51 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.