Re: Proposal: Block elements should be able to stack vertically and fill view port

On Wed, May 8, 2013 at 9:59 AM, Axel Dahmen <brille1@hotmail.com> wrote:
> Currently (CSS3) it doesn't seem to be possible to stack block elements
> vertically in a way so they fit the viewport.
>
> So it currently isn't possible to have a content area with a static
> background image, automatically filling the actual view port dimensions:
>
> -------------------------------
> <html>
>
> <head>
>  <style type="text/css">
>
>  #header
>  {
>    height: 10em;
>    background-color: #eee;
>  }
>
>  #content
>  {
>    background: url("bg.png") center center / cover no-repeat fixed;
>    overflow: auto;
>  }
>
>  #footer
>  {
>    height: 10em;
>    background-color: #ccc;
>  }
>
>  </style>
> </head>
>
> <body>
>  <div id="header"></div>
>  <div id="content"></div>
>  <div id="footer"></div>
> </body>
> </html>
> -------------------------------
>
> So I'd like to suggest to add a "fit" value to the height and width
> properties, similar to the obsolete "*" attribute value for HTML table cell
> widths.

This is what the Flexbox display type is for:

html { height: 100%; }
body { display: flex; flex-flow: column; height: 100%; }
#header { height: 10em; background: #eee; }
#footer { height: 10em; background: #ccc; }
#content { flex: 1; overflow: auto; background: url("bg.png") center
center / cover no-repeat fixed; }

~TJ

Received on Wednesday, 8 May 2013 17:13:13 UTC