PRB: Nested Elements That Use a Percentage for Height or Width Do Not Render as Expected (295301)

The information in this article applies to:

Microsoft Internet Explorer (Programming) 4.0
Microsoft Internet Explorer (Programming) 4.01
Microsoft Internet Explorer (Programming) 4.01 SP1
Microsoft Internet Explorer (Programming) 4.01 SP2
Microsoft Internet Explorer (Programming) 5
Microsoft Internet Explorer (Programming) 5.01
Microsoft Internet Explorer (Programming) 5.01 SP1

This article was previously published under Q295301

SYMPTOMS

When you use Internet Explorer version 5.01 or earlier, you expect the following code to show one screen-height DIV element and one DIV element that is half the size and is contained within the screen-height element:

<div id=mydiv2 STYLE='background-color:#AAAAAA'>

   <div id=overWind2 
      STYLE='width:100%;height:50%;overflow:auto;background-color:#EEEEEE'>

   without div height/width specified

   <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

   <BR><BR><BR><BR><BR><BR><BR><BR>end w/o div

   </div>

</div>

However, both DIV elements appear at 50 percent of the screen's height with the scroll bar of the inner DIV elements visible.

CAUSE

If they are not explicitly set, the attributes of the parent DIV element conform to their child's size. The child's size is set as a percentage. Because the containing DIV element of the child has no style specified for this value, the child uses the next higher container with a size, which is the window itself in this case.

The World Wide Web Consortium (W3C) CSS2 specification at http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property states that if the height of the containing block is not specified explicitly, the value is interpreted as "Auto" rather than the expected 100 percent.

RESOLUTION

According to CSS2 specifications, use the following code to resolve this problem:

<div id=mydiv style="width:100%;height:50%;"> 


   <div id=overWind 
      STYLE='width:100%;height:100%;overflow:auto;background-color:#DDDDDD'>

   with div height/width specified

   <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

   <BR><BR><BR><BR><BR><BR><BR><BR>end w/ div

   </div>

</div>

REFERENCES

For additional information, click the article number below to view the article in the Microsoft Knowledge Base:

299446 BUG: Internet Explorer 5.5 May Not Print Table Beyond First Page

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

http://msdn.microsoft.com/ie/

http://support.microsoft.com/iep

Modification Type:	Major	Last Reviewed:	5/11/2006
Keywords:	kbDHTML kbprb KB295301