Re: Mixing percentage height and min-height

Allan Sandfeld Jensen wrote:
> CSS 2.1 #10.5: "<percentage> Specifies a percentage height. The percentage is 
> calculated with respect to  the height of the generated box's containing 
> block. If the height of the containing block is not specified explicitly 
> (i.e., it depends on content height), and this element is not absolutely 
> positioned, the value computes to 'auto'. "

I've always wondered about this a little bit, especially in light of the 
following text under 
<http://www.w3.org/TR/CSS21/visudet.html#min-max-heights>:

   The following algorithm describes how the two properties
   influence the computed value of the 'height' property:

    1. The tentative used height is calculated (without 'min-height'
       and 'max-height') following the rules under "Calculating
       heights and margins" above.
    2. If this tentative height is greater than 'max-height', the
       rules above are applied again, but this time using the value
       of 'max-height' as the computed value for 'height'.
    3. If the resulting height is smaller than 'min-height', the
       rules above are applied again, but this time using the value
       of 'min-height' as the computed value for 'height'.

 > but if you have:
> 
> .parent { min-height: 100px }
> .child { height: 50% }
> 
> What is the effect on .child?

The way I'd always read the spec part I quoted above in this scenario is:

1)  Apply section 10.6.3 to the parent with "height: auto" for the
     parent.
2)  Apply section 10.6.3 to the child.  End up with a computed height
     of "auto" for the child.
3)  Determine the resulting child's height and hence parent's height.
4)  If the resulting parent's height is >= 100px, we are done.
5)  Otherwise, apply section 10.6.3 to the parent with a computed height
     of "100px" for the parent.
6)  Apply section 10.6.3 to the child.  End up with a computed height
     of "50px" for the child.  Done.

This setup has two drawbacks, in my opinion.  First of all, having to 
perform those two reflow passes on the kids of the parent is a little 
unfortunate (highly amenable to exponential growth in the tree depth). 
Secondly, the resulting height of the child is discontinuous: if the 
"intrinsic" height of the child is 99px, the child ends up 50px tall, 
but if it's 100px, the child ends up 100px tall.  Of course there are 
other discontinuous algorithms in the CSS spec... (say margin-collapsing).

-Boris

Received on Wednesday, 11 October 2006 20:40:02 UTC