Why Do Internal Divs Fail to Reach Full Height in IE When Using 100% Height in a Container Div?

CSS Height Quirks in Div Positioning Across Firefox and IE

In this scenario, the aim is to create a container div that encapsulates two internal divs, both spanning 100% width and height within it. While this works as intended in Firefox, IE exhibits a peculiar behavior where the internal divs fail to reach the full height of the container, leaving them at the height of the contained text.

This discrepancy stems from the concept of a "containing block" in CSS computation. Percentages are not calculated relative to the viewport but rather to the height of the "containing block" - in this case, the #container div.

In the provided CSS, #container lacks an explicit height specification, relying on "auto" by default. This means that its height is determined based on the content inside. Subsequently, the 100% height property for the internal divs becomes relative to this auto-height, which varies based on text content.

To rectify this issue, the following adjustments are necessary:

1. Declare an explicit height value for #container to establish the containing block:

   <code class="css">#container {
     height: 100%;
   }</code>

2. Set heights for both html and body, as the initial Containing Block is browser-dependent:

   <code class="css">html, body {
     height: 100%;
   }</code>

These modifications will enable the internal divs to span the full height of #container and 100% of the viewport, resolving the height issues observed in IE.

The above is the detailed content of Why Do Internal Divs Fail to Reach Full Height in IE When Using 100% Height in a Container Div?. For more information, please follow other related articles on the PHP Chinese website!