More on percentage, height and min-height

I have joined this list especifically to discuss min-height and
percentage. I have been following the discussion on the web, so I cant
reply inside that thread.

So the spec (css 2.1):
---------------8<---------------------------------
10.5 Content height: the 'height' property
[...]
<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'. A percentage height on the root element is relative to
        the initial containing block.
------------------->8-------------------------------

There is an implicit definition here that was not take into account.

"Explicit definition of height is when in depends on the content
height."

So in the example:

-----------8<-------------
<body style="height: 1000px;">
  <div style="min-height: 100%;">
    <div style="height: 50%;">
       bla blabla
    </div>
  </div>
</body>
--------->8---------------

By the previous discussion, the second div would have a height of auto.
However, as the contained block (1st div):
- had an explicit specified height of AT LEAST 100%.
- its height was not defined by the content height.

Based on this arguments, the second DIV should have a height of 500px;

Of course this is not what the Browsers (FF, Opera and Konqueror) do,
and that was backed by the this list in the previous thread.

So, there is some points that I would like to understand regarding this.

In my interpretation, specifing min and max height (probably affect
width too) means:
        The hight of this element should be AT LEAST <min-height value> 
        but not more than <max-height value>.

I am explicit setting up the height value to not be outside this range.
So that the child elements would be able to consider this height when
using percentage.

-- Why is this not true ????

Regarding min/max values what are they are usefull for if you cant count
on them to use in the child elements? Really.

IMHO, this havent being a major issue becaus IE (6 at least) has a
broken height works as a min-height but is considered to the child
elements.  Dont know about IE7, but if it works as discussed here this
might heat up a little.

What most people do to overcome this is to use height instead of
min-height and have overflow: visible.  This is a bad, but necessary,
hack in my opinion.


Regarding what I quoted above from 10.5 percentage, why is the spec like
this?  

-- Why do I have to count on the container block to have an explicit
height to be able to use a percentage height? What is the reasoning
behing this definition?

What is the usefullnes of this? I really want to know, because I am
probably missing some fundamental point here.

A common exemple why this issue is so important is when designing a
XHTML/CSS template for a dynamic system.

You dont know what the content will be, neither the browser window
viewport, but the design should work flawless with a huge content or a
empty one and not mattering (at least to some point) the viewport size.

Not forgetting without having to falling over to correct this with
javascript at runtime (unless it is for IE of course :).


Thank you for your time,

Raul Dias

Received on Monday, 16 October 2006 01:20:05 UTC