Re: [css3-values] Proposal for auto fitting value for height and width

On Thursday 29 April 2010 01:04:33 Adam Del Vecchio wrote:

> I'd like to propose an auto fitting value that could be used with the
> height and width propertys.
>
> What this would do would have an object in the DOM fill all remaining
> space. If it is used with a child of the body element, it would fill
> the remaining screen space.
>
> Possibly something like:
>
> Height: fit; or width: fit; ?

The problem with this is that it leaves the renderer to guess which 
available space you mean. (Or, more precisely, it's the writers of the 
CSS specification who will have to guess what is meant in every 
situation.) There are no doubt simple cases, such as a fixed-size 
parent with two children of the same type, but there are plenty of 
difficult cases. E.g., if there is a float somewhere in the available 
space, do you want your element to take the available space *next to* 
the float or *below* it?

The approach taken by CSS so far (tables) and by the extensions we're 
working on (flexbox and templates) is to first make it explicit which 
elements vie for a given space. Once you know which elements are in the 
same row (or column), you can distribute the space over just those 
elements.

Next, to distribute the space properly, we probably need more than a 
keyword 'fit' that says whether an element is flexible or not. We 
probably need:

   a. Which elements to grow first and which next
   b. If several grow at the same time, how much each gets

You could then say, e.g., that, in a row A B C, element A has its 
intrinsic size and never grows, B has at least its intrinsic size but 
can grow to 20em, and C takes the space that is left once B is 
maximized.

Expressing (a) and (b) as new values on 'width' and 'height' probably 
leads to a difficult syntax, so the proposal in the flexbox module uses 
two separate properties: 'box-flex-group' (for a) and 'box-flex' (for 
b).

It may be that (b) is overkill and (a) is sufficient in practice. We'll 
have to see.

>
> Example, if an element directly opened after the body tag has an ID
> of #wrap and the stylesheet says wrap should have height: fit; then
> #wrap would fill the screen. If after #wrap is closed, and another
> element is opened with a heigt of lets say 100px, this element is
> pushed to the bottom, and the first element (located at the top) is
> given a height of browser window minus 100px. 

In flexbox syntax, this would be something like:

    BODY {min-height: 100%; display: vbox}
    #wrap {box-flex: 1} /* all others are 0 by default */

    <BODY>
      <DIV ID=wrap>...</DIV>
      <DIV>... this happens to be 100px high... </DIV>
    </BODY>

(The white space between the DIVs is automatically ignored.) Not in this 
example, but in the general case you may need to decrease some margins 
between elements as well, because margins in a vbox don't collapse.

The WG is studying if the same 'box-flex' and 'box-flex-group' 
properties can also apply to tables and templates. Flexbox might be 
just a special case of a table (viz., a table with only one row or 
column). That could look very similar:

    BODY {height: 100%; display: table}
    DIV {display: table-row}
    #wrap {box-flex: 1}

>
> Example 2, if an element has a height of 500px, and a child element
> has a height of 150px, and a sibling of that child has a height of
> fit, that element's height is 350px.&nbsp;



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Thursday, 29 April 2010 17:39:39 UTC