Re: [CSS21] min-height: 100% in html, body

Le 27/01/2012 18:02, Øyvind Stenhaug a écrit :
> First of all, the term "specified explicitly" seems nonsensical. All
> elements have a specified value. On the other hand, the containing block
> isn't an element, and isn't necessarily even related to one. So the
> parentheses actually contain the crucial part here (and readers must
> figure out for themselves how exactly to determine whether the containing
> block depends on content height).
>
> Now, the main issue: even if assuming the simple case where the containing
> block corresponds to some particular dimensions of an ancestor block
> element's sole box, exactly which value does "the height" refer to?
>
> - The so-called tentative used height? ("Depends on content height" in the
> example)
> - The used value? (Does not "depend on content height" in the example)
> (- Something else?)

Hi,

I agree this should be more explicit, but I think it is the computed 
value. A computed value of 'auto' is the only case where the used height 
depends on the content:

According to 10.1, a containing block is one of :

1. The viewport
2. A page area
3. The content edge or padding edge of a block container
4. The bounding box around the padding boxes of ... something. I’m not 
sure how exactly that one works. (Can an inline element generate more 
than one inline-level boxes while *not* being split across lines?)

1 and 2 always have a fixed height. I’m not sure about 4, but for 3 it 
depends on the 'height' property. The height is "specified explicitly" 
if and only if the 'height' property dos not compute to 'auto'.

Note that all this happens at computed-value time, so if this box itself 
becomes a containing block its own invalid percentage value will already 
have computed to 'auto'.


Back to the initial issue: I was bitten by this just a few days ago. At 
the time I did not understand why "html, body { min-width: 100% }" did 
not render as I expected. After reading this thread I see that, to make 
"html>body>#foo" at least as tall as the viewport, authors should use:

html, body { height: 100%; margin: 0 } /* these are "specified 
explicitly" to the viewport height */
#foo { min-height: 100% } /* this one may overflow its ancestors */

Regards,

-- 
Simon Sapin

Received on Friday, 27 January 2012 20:42:12 UTC