trying to make a DIV 100% height

Forum Moderators: not2easy

Message Too Old, No Replies

trying to make a DIV 100% height

BabyJai

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

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

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. =/