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
Created attachment 14742 [details] testcase
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.
CSS2.1 is clear that this is a bug. http://www.w3.org/TR/CSS21/visudet.html#the-height-property
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
I need to address the replaced element case too.
Fixed.