100% Height [ non CSS hack]

Dear Fellow Webforumz users,

I have a little problem with 1 of my websites.
The layout now looks like this :

• 1 "Main_Container" that has a height and width of 100%
• in this main_Container is 1 header div with a height of 120px.
• Underneath the Header div i want to place a new Container ( "Down_Container" ) this Container must also have a height of 100% ( till the end of the screen )
  
  In this "Down_Container" will be 3 more divs, and in these divs will be the content/menu/adresse/polls and stuff

the problem is now, that i get a scrollbar, becuz he takes the height of the whole screen and because of the header he "adds" 120px to it.
( so now i have : 120px+screenheight )

Now i know i can solve this with a CSS hack. but i dont want this. what is the proper way to solve this problem ?

Because Code says more then Words:
HTML

Code: Select all

<div id="Main_Container">
  <div id="Header"><div>
  <div id="Down_Container">
  </div>
</div>

CSS

Code: Select all

html, body {
 width:100%;
 height:100%;
 overflow:auto;
 margin:0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
 background-image:url(images/bk225.gif);
}
 
#Main_Container {
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 background-color:#00CCFF;
}
 
#Header {
 width:1012px;
 height:119px;
 background-image: url(images/Respond1_1.jpg);
}
 
#Down_Container {
 width:1012px;
 margin-top:200px;
 height:100%;
 margin:0px;
 padding:0px;
 background-color:#663333;
}

Couldn't you just repeat the background on the body that way regardless of the height of the content div it will have at least the appearance of 100% height. background: url(../images/foo.jpg) top center repeat-y;? Unless you specifically for some reason need the containing div to be 100%. That requires no hacks either btw.

__________________
I hate IE 6. Just sayin....

You are talking about Faux Colums ;-)

But in the Down Container are coming 3 more divs. in these 3 divs comes a lot of other divs ( Adress/menu/content/poll enz enz. ) so i need them to be 100% and no bigger then the screensize, so i can position the other divs.

I was thinking about the follow solution.

Just create 1 big div. put here the 3 divs in.
Everydiv that comes into 1 of the 3 divs has a top-margin:120px;
and @ the end make a header div that has absolute post.
( so the header div, will be used as a Overlay div, ( 1 layer ) en also he is out of the workaround.

Dont like this solution, but i think it is the only one.

I was in no way referring to faux columns, but it seems to me you are over complicating a very common and basic layout. Perhaps if I could see what you are trying to accomplish we can avoid any further confusion.

__________________
I hate IE 6. Just sayin....