DIV height:100%; wont expand on win resize -
12-08-2005
, 10:55 AM
Ive got a document that i want to have a constant vertical "bleed" effect on.
To accomplish this ive defined both the HTML and BODY elements as "height:
100%;".
Then i have two mian DIVs...
#shell (the green area) is basically jsut a background shell container - like
a border for the left and right of the DIV within it. It also has defined
"height: 100%;"
#main (the blue area) is the main container for the site and is within #shell.
It has defined "height: 100%;" as well. Within this DIV goes pretty much
everything.
The next layer of DIVs (as i said all within #main) are a series of static
containers. #header (also the blue area) is a defined height DIV and contains a
set DIVs with a menu system and stuff. #body (the white area) is a vertically
expanding DIV, ie. no defined height (although i have used min-height to define
it so its not too small) contains all the content layout. #footer (the gray
area) is a defined height DIV containing a simple footer image.
http://wtf.vectrbas-d.com/expansion/index.html
Now the problem is #main is not expanding if the browser window is resized for
some reason. It always remains the height of #body (which is determined by the
contents of #body). What i want to happen is for #main to ALWAYS expand to the
same height as #shell. I thought the simple rule: div#main {height: 100%;}
would take care of this, but appraently im missing something. I thought
"height: 100%;" meant 100% of the container elements height, and in nearly all
cases it seems to work this way. But that dosent seem to be happening here.
When i initially began working on this layout i had trouble getting #shell to
go to 100% of the window area... I realized after investigation this was
because Body and HTML are considered container elements and so the relational
height of #shell is configured using the the height of these two elements, not
the actual viewport, hence my setting HTML and BODY to "height: 100%;".
After this i realized that even then, the height of #shell expnaded only to
the height of the borwser window in Moz, never beyond. to fis this i changed
#shell from "height: 100%;" to "min-height: 100%;" and added a comment for IE
only whos expanding box bug takes care of things.
Ive tried applying both of my solutions to these two issues to the issue Im
having with #main because im almost positive its a problem in the same vein...
but they arent working. Im going crazy over here...
PLEASE HELP! Before i kill again ;-) |