| trying to make a DIV 100% height
|
BabyJai
msg:4428406 | 3:09 am on Mar 13, 2012 (gmt 0) |
html, body {
height: 100%;
font-family: Tahoma, Arial;
font-size: 11px;
font-style: normal;
color: Silver;
}
#content {
width: 960px;
-moz-border-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background: #2e2e2e;
margin-left: auto;
margin-right: auto;
position: relative;
top: 60px;
padding: 5px;
-moz-box-shadow: 5px 5px 5px #2e2e2e;
-webkit-box-shadow: 5px 5px 5px #2e2e2e;
box-shadow: 5px 5px 5px #2e2e2e;
height: 100%;
}
|
alt131
msg:4430579 | 3:47 pm on Mar 18, 2012 (gmt 0) |
Hi BabyJai and welcome to WebmasterWorld,
Can you be a bit more specific about the issue? You see, the total height of the div will be height + padding, and it has been positioned top:60px so the total height of the div is more than 100% and it is drawn lower down the page so that it exceeds the 100% height for body. You can see this more clearly if you set a different background-color for the html and body.
|
Dhakadice
msg:4440848 | 1:25 pm on Apr 14, 2012 (gmt 0) |
I'm having the same problem. =/
Check out these two pages for example:
<HTML style="margin:0; padding:0;">
<BODY text="#000000" link="#E00000" vlink="#E00000" alink="#FF8080" style="margin: 0; padding: 0; height: 100%;">
<TABLE height="100%" width="100%" style="background-image:url('logoblank.gif');
background-repeat:no-repeat; background-position:center center;background-size:contain;"><TR><TD align=center valign=center>
<DIV style="height: 480px; width: 60%;border: 3px solid #FF0000; overflow: auto; padding: 0; margin: 0;">
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
</DIV>
</TD></TR></TABLE>
</BODY>
</HTML>
Now try to change the "480px" to as little as "1%".
<HTML style="margin:0; padding:0;">
<BODY text="#000000" link="#E00000" vlink="#E00000" alink="#FF8080" style="margin: 0; padding: 0; height: 100%;">
<TABLE height="100%" width="100%" style="background-image:url('logoblank.gif');
background-repeat:no-repeat; background-position:center center;background-size:contain;"><TR><TD align=center valign=center>
<DIV style="height: 20%; width: 60%;border: 3px solid #FF0000; overflow: auto; padding: 0; margin: 0;">
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
</DIV>
</TD></TR></TABLE>
</BODY>
</HTML>
In my browser, example 1 works fine, but that's because the height is in pixels.
In example 2, where I've used percent instead, the page seems to be bigger than the windows (causing a scrollbar to appear and the background image to be partly off-screen).
It seems that once you start using percent for height, the page becomes taller.
Setting padding and margin to 0 in both the DIV, the TABLE, plus BODY and even HTML, seems to do nothing. =/
|
|
|
