IE 5/Mac and 100% height values

From: James Aylard <jaylard@pixelwright.com> · Date: Wed, 27 Feb 2002 21:51:10 -0800

	Some discussion and testing on the CSS-Discuss list [1] has
raised a question about how IE 5.x on the Macintosh renders 100% heights
under the following conditions:

* The style sheet specifies 100% height for the html and body elements
* A div is placed within the html document, whose height is also set to
100%
* In order to better see the div and to understand what is happening, a
fixed width (say, 200px) is applied, as is a background color (say,
#cccccc)

	For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Div with 100% Height</title>
    <style type="text/css">
      html, body {
        height: 100% ;
      }
      div {
        height: 100% ;
        width: 200px ;
        background-color: #cccccc ;
      }
    </style>
  </head>
  <body>
    <div>This should have a height of 100%</div>
  </body>
</html>
        
	In most browsers on which this was tested (at least IE 6/Win32,
Mozilla 0.9.8, and Netscape 6.2.1), the div remains at a fixed height of
100% of the viewport (with some space for the body element's default
margin/padding). In IE 5/5.1 for the Macintosh, on the other hand, the
height of the div is precisely proportional (to the exact pixel) to the
_width_ of the viewport. As the browser window is resized horizontally,
the div's height grows or shrinks accordingly.
	I am unaware of anything in the CSS 2 spec that would dictate
this behavior, and am tempted to think it a bug. Can anyone --
especially someone from the IE 5/Mac team -- explain this behavior?
	Thanks.

James Aylard

1. http://two.pairlist.net/mailman/listinfo/css-discuss,
 
http://two.pairlist.net/mailman/private/css-discuss/2002-February/002676
.html