IE 5/Mac and 100% height values

	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
* 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,

	For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <title>Div with 100% Height</title>
    <style type="text/css">
      html, body {
        height: 100% ;
      div {
        height: 100% ;
        width: 200px ;
        background-color: #cccccc ;
    <div>This should have a height of 100%</div>
	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?

James Aylard


Received on Thursday, 28 February 2002 00:51:27 UTC