title: HTML+CSS Layout with 3 rows, middle row fluid sandwiched by fixed height rows
body: <p>I am wondering if there is a pure html+css way to specify a 3 row layout where the middle div is greedy and takes up all the remaining height that the two fixed rows leave behind.  In XAML this would be the asterisk (*) character.  Ex.  <code>&lt;row height="*"&gt;&lt;/row&gt;</code>  which tells the rendering engine that this row will consume all remaining height offered by its parent.</p>
  
  <p>I want the total height to take up all screen height (with no vertical scrolling).  </p>
  
  <pre><code>&lt;body style="height:100%"&gt;
     &lt;header style="height: 64px"&gt; &lt;/header&gt;
  
     &lt;div style="height: *"&gt; &lt;/div&gt;
  
     &lt;footer style="height: 64px"&gt; &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When the browser screen is resized, the middle content should fluctuate but the header and footer should remain same height fixed.</p>