`height:100%` seems redundant

[thierryk]

The height and width here and here do not seem to serve a purpose since the element is styled with the following:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

The offsets alone should be enough to stretch the box vertically and horizontally in IE7+

[mrmrs]

@thierryk did you test this, or is this an assumption?

[thierryk]

@mrmrs There is no need to test this and it is not an assumption either. I came up with this "hack" and at the time the dimensions were necessary because IE6 fails to stretch the box using offsets alone (top, right, bottom, left).

Check my article on YUIBlog:

The size of the box may be the result of the top, right, bottom, and left property values. For examples, zeroing out all properties will make the box stretch to match the dimensions of the padding box of its containing block. See zeroing out all box offsets (note: ie6 does not stretch the box).

[thierryk]

@mrmrs I forgot to mention that it would have been different if you did not have the following rule:

img, 
canvas, 
iframe, 
video, 
svg, 
select,
textarea {
  max-width: 100%; 
}

because that max-width prevents the box from stretching outside of its containing block.

[thierryk]

@mrmrs As a side note, I see little value in the z-index declaration in your original rule since this kind of inner box is not really meant to have siblings.

Makes sense?

[thierryk]

@mmrs forget what I said. It seems there is an issue related to iframes (in Chrome at least) where the box extends beyond the boundaries of its containing block and width and height appears to fix that issue. This means it is not the dimensions declarations that appear to serve no purpose but the right and bottom offsets. The iframe issue (what I did test in Chrome) shows this by modifying the box dimensions (to the desired size) once width and height are added ignoring the offset values.