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

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 way it would be possible to stack block elements vertically and to have 
a footer always visible while the content area is to be scrolled alone.

The proposed "fit" value should distribute a view port's height across all 
sibling block elements after subtracting all other sibling blocks' computed 
height.

So this would allow for centering a div vertically, too:

<div id="header" style="height: 10em;"></div>
<div id="content1" style="height: fit;"></div>
<div id="centered" style="height: 10em;"></div>
<div id="content2" style="height: fit;"></div>
<div id="footer" style="height: 10em;"></div>

... resulting in something similar to this:

=============================
-----------------------------
|                           |
-----------------------------
|                           |
|                           |
|                           |
-----------------------------
|                           |
-----------------------------
|                           |
|                           |
|                           |
-----------------------------
|                           |
-----------------------------
=============================

The computed block element height should not get below 0px, so if the summed 
up height of all sibling block elements result in being greater than the 
view port's height, none of the "fit" height block elements would be 
rendered and a scroll bar would appear to display all the non-"fit" height 
block elements.

Axel Dahmen

Received on Wednesday, 8 May 2013 17:00:24 UTC