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

On Wed, Apr 28, 2010 at 8:37 PM, Adam Del Vecchio
<adam.delvecchio@go-techo.com> wrote:
> Hello,
>
> I'd like to propose an auto fitting value that could be used with the height
> and width propertys.
>
> What this would do is it 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; ?
>
> 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
> height 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.
>
> 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.

It's difficult to make this work in general, because the amount of
leftover space can't always be computed until after you've done
layout.  This means that you have to do layout once, then figure out
your spacing, then do layout again, then see if spacing has changed
any, and repeat until everything stabilizes.  Having to iterate to
figure out a stable layout is a no-no.  ^_^

However, this is doable if you restrict yourself somewhat in what sort
of properties you allow, and this is precisely what the Flexbox module
allows.  You can just set the container element to be a flexbox, and
then give some of the elements a box-flex value.  For example, given
this markup:

<body>
  <div id=wrap>
    foo foo foo
  </div>
  <div id=footer>
    bar bar bar
  </div>
</body>
<style>
body {
  display: box;
  box-orientation: vertical;
}

#wrap {
  box-flex: 1;
}

#footer {
  box-flex: 0;
  height: 100px;
}
</style>

You'll get the rendering you want, where the #wrap takes up as much of
the height as possible, but no more.

(Note, though: Flexbox is just a working draft right now, and has
relatively early and somewhat buggy/lacking experimental
implementations only.  I'm just informing you that the use-cases
you're bringing up are covered and more, so don't worry about it.
^_^)

~TJ

Received on Thursday, 29 April 2010 14:51:05 UTC