title: Stretch div between header and footer
body: <p>The task I encountered looks standard: I have a fixed height container and 3 <code>div</code>'s inside it. I want the 2nd <code>div</code> to be stretched between the top and the bottom <code>div</code>'s. When the contents of the 2nd <code>div</code> overflows - I would like to show the scroll bars.</p>
  
  <p>I know how to accomplish this task using the <code>absolute</code> positioning. A question is: can I do it using the <code>table</code> on <code>div</code>s?</p>
  
  <p>An additional requirement: if possible, I would like to avoid setting header's height as fixed.</p>
  
  <p>I have tried to code it in my fiddle, but, as you see, <a href="http://jsfiddle.net/USZXa/" rel="nofollow">I failed</a>.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      height: 500px;
      background-color: gainsboro;
  }
  
  .table {
      display: table;
      height: 100%;
  }
  
  .table &gt; div {
      display: table-row;
  }
  
  .table &gt; div &gt; div {
      display: table-cell;
      vertical-align: middle;
      border: 1px solid black;
      overflow: scroll;
  }
  
  .center &gt; div {
      height: 100%;
  }
  
  .content {
      height: 700px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="table"&gt;
       &lt;div&gt;
           &lt;div&gt;XXX&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="center"&gt;
           &lt;div&gt;
               &lt;div class="content"&gt;&lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
       &lt;div&gt;
           &lt;div&gt;YYY&lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>