Re: CSS: %% / 'calc' length unit

Anne van Kesteren (fora) wrote:
> Depends. If FOO is the root element and the viewport is 400px width, 50% 
> will become 200px, and the width wel be 200px - 100px = 100px. BAR will 
> inherit that.
> 
> If the viewport is only 150px width, the 'width' of FOO will become '0' 
> as you told me and BAR will inherit that.
> 
> (If this is not what you meant, could you say it more explecit and 
> perhaps give a more clearer example?)

Clearer example:

foo, bar { display: block; }
foo { width: calc(50% - 100px;) }
bar { width: inherit; }
root { width: 50%; }

<root>
   <foo>
     <bar />
   </foo>
</bar>

What happens?  Note that style computation happens before reflow, so when 
deciding the computed style of "foo" you can only use the "50%" value from 
"root"; you don't know how many pixels or other absolute units it corresponds 
to.  If "foo" had "width: 50%", "bar" would inherit the value "50%".  Should it 
inherit the "calc" expression wholesale?  Or what?

-Boris

Received on Friday, 7 May 2004 11:25:17 UTC