HighDots Forums  

DIV height:100%; wont expand on win resize

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss DIV height:100%; wont expand on win resize in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Prodigital Son
 
Posts: n/a

Default 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 ;-)


Reply With Quote
Reply




Thread Tools
Display Modes

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

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



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.