Bug 13887 – Height 100% not applied correctly inside an absolute positioned element

• Status: VERIFIED
• Resolution: FIXED
• Component: Layout and Rendering

[Andras Nemeseri]

1., Create a block element without height specified and "position: relative".  (element A) 

2., Insert a block element inside A and set "position: absolute" and "height: 100%". (element B)

Now B will expand it's height with A

3., insert a block element inside B and set "height: 100%". (element C)

Now the height of C should equals to A (and B)

( 4., insert other block elements with specified height into A, to see the problem. )

Problem:
Height of element C will not equals to height of element A.
Works with the following browsers:
Opera 9.21, Firefox 2, Camino 1.0.4, Internet Explorer 7

Workaround:
Set "position: absolute" to C.

Test case available:
http://nemeseri.extra.hu/safari/bug1.html

[Andras Nemeseri]

Created attachment 14742 [details]
testcase

[Dave Hyatt]

Confirmed.  Positioned elements whose height resolves to non-auto can actually serve as a "stopping point" for percentage height calculations.  This can happen when top and bottom are explicitly specified too (I think that's another bug on file).

This is pretty easy to fix.

[Dave Hyatt]

CSS2.1 is clear that this is a bug.

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

[Dave Hyatt]

Created attachment 14746 [details]
Patch that fixes bug.

Make sure to stop at positioned containing blocks that have specified heights.

Comment on attachment 14746 [details]
Patch that fixes bug.

r=me

[Dave Hyatt]

I need to address the replaced element case too.

[Dave Hyatt]

Fixed.