title: CSS vertical Table Layout
body: <p>I have a table made of divs like this:</p>
  
  <pre><code>&lt;div class="table"&gt;
      &lt;div class="tRow A"&gt;
          &lt;div class="tCell"&gt;
              Test
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tRow B"&gt;
          &lt;div class="tCell"&gt;
              &lt;!-- content here --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tRow C"&gt;
          &lt;div class="tCell"&gt;
              Test
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following css:</p>
  
  <pre><code>body, html{
      height: 100%;
  }
  
  .table{
      display: table;
      height: 100%;
      max-height: 100%;
      width: 200px;
      table-layout: fixed;
  }
  
  .tRow{
      display: table-row;
  }
  
  .tCell{
      display: table-cell;
  }
  
  .B {
      background: yellow;
  }
  
  .B .tCell{
      overflow: hidden;
  }
  
  .C{
      height: 50px;
      background: green;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/HtA43/" rel="nofollow">http://jsfiddle.net/HtA43/</a></p>
  
  <p>Now what i need (and i am not able to get this working) is, that the table is rendered 100% height. <code>rowA</code> getting as high as its contents <code>rowC</code> with a fixed height at the bottom. And <code>rowB</code> should fill the rest of the space.</p>
  
  <p>This works so far, but when the content of <code>rowB</code> exceeds its size, the cell and thus the table grows. What i need is that <code>rowB</code> does not grow but the overflow is hidden.</p>
  
  <p>Any suggestions?</p>