Re: CSS3 box height %

Jens Meiert wrote:
[>Ian Hickson wrote:]
>>...what height is the <a> element?
> 
> Ian -- Should be rendered as 100%, assigning the second <b /> element a 25%
> height (100% related to maximum space available, or using the entire screen
> height). But wouldn't it be more useful to bring in this example:
> 
>    <a>
>      <b1> 1 </b1>
>      <b2> 2 </b2>
>      <b3> 3 </b3>
>    </a>
> 
>    * { display: block; }
>    a { height: 500px; }
>    b1 { height: 75%; }
>    b2, b3 { height: auto; }
> 
> ...and thus clarifying the only legal way to mix relative with absolute
> values? <b1 /> would obviously be 375px high, while allowing <b2 /> and <b3 /> to
> share its space.

And what good can the auto do in case we have absolute values in mix? If 
<a> has absolute height I can easily type in other heights as absolute 
too and the auto value does very little after all.

I think, a better way for achieving the result this proposed auto value 
would be used for (if I've understood it correctly) would be to come up 
with a new dynamic unit.

Idea 1:
-------

ce: containing element
This unit can be used for any length and it's defined as containing 
element's height or width (as appropriate). If the containing element 
has the respective height or width set to 'auto', then the size is taken 
from it's parent. If the root element has 'auto', the value for ce will 
be width or height of the viewport.

For example:

<a>
   <b>1</b>
   <b>2</b>
</a>

* { display: block; }
b { height: 1ce; }

Each of the b elements would be rendered with the height equal to one 
viewport.

However, this doesn't make sense, because height of <a> is now 2 
viewports so both <b> should have height of 2 viewports and <a> is now 4 
viewports... ...infinite recursion, anyone?

Idea 2:
-------

vpw: viewport width
vph: viewport height

According to my experience, when some authors look for exotic ways to 
define size of some element, it really comes to trying to define size of 
that element relative to viewport size. Nowadays, one has to use 
percentages and carefully compute size of every element from root to the 
element one wants to set size for. This is logical addition to 'rem' 
unit (root's em).

The only additional unit we need is something equivalent to HTML's '*'. 
If I have

<a>
   <b>1</b>
   <b>2</b>
   <b>3</b>
     ...
   <b>n</b>
</a>
<x>x</x>

* { display: block; }
a { height: 0.8wph; }
b { height: 1auto;  }
x { height: 0.2wph; }

here the 'auto' unit (obviously we want a better name) should mean that 
I want that every one of those b elements has equivalent height. I 
really don't know beforehand how many elements I'll have so I cannot use 
percentages.

If I wanted to make the first b element to be exactly twice as high as 
the rest of the b elements I'd simply add

a > b::first-child { height: 2auto; }

and the height of a element would be distributed to n+1 parts and the 
first b element would get 2 parts.

I'm aware that such an unit could be computationally expensive, but I 
cannot think of any better way to have multiple elements sized 
proportional to parent element if the number of child elements is 
unknown by the time the stylesheet is written.

-- 
Mikko

Received on Wednesday, 13 August 2003 06:54:54 UTC