Webmaster World Forum http://www.webmasterworld.com

Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- trying to make a DIV 100% height

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

Thread source:: http://www.webmasterworld.com/css/4428404.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com