title: 100% height on css table
body: <p>I am trying to make a fluid layout that has no fixed height or width elements. The body of my page is divided into three columns (and since I want them all to be equal heights, I've decided to use css tables). However, when I try and add a 100% height property to the table div (or the table-cell divs) they don't expand to the full size of div.middle. I have made a JS fiddle for this question with the full code <a href="http://jsfiddle.net/3NMw5/" rel="nofollow">http://jsfiddle.net/3NMw5/</a>, but here is a snippet:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class='titleBar'&gt;
          &lt;div class='wrap'&gt;
              &lt;img src='../images/logo.png' /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='middle'&gt;
          &lt;div class='wrap mainContent'&gt;
                  &lt;div class='leftColumn'&gt;left here&lt;/div&gt;
                  &lt;div class='center'&gt;center&lt;/div&gt;
                  &lt;div class='rightColumn'&gt;right&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='footerBar'&gt;&lt;div class='wrap'&gt;footer&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the css: </p>
  
  <pre><code>div.mainContent { display: table; height: 100%;}
  div.leftColumn { width: 20%; display: table-cell; background-color: #D2B48C; margin: 0; padding: 0;}
  div.rightColumn {width: 20%; display: table-cell;}
  div.center {width: 60%; display: table-cell;}
  </code></pre>