title: Make div with display:table have 100% height of parent div
body: <p>I am trying to make a div with <code>display:table</code> fill 100% of its parent div. Here is the div structure:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div id="header"&gt;&lt;/div&gt;
     &lt;div id="body"&gt;
         &lt;div id="mytablediv"&gt;
      &lt;div class="row"&gt;
               &lt;div id="left"&gt; &lt;/div&gt;
               &lt;div id="content"&gt;&amp;nbsp; &lt;/div&gt;
                   &lt;div id="right"&gt; &lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body { margin:0; padding:0; height:100%; }
  #container { min-height:100%; position:relative; }
  #header { background:#ff0; padding:10px; }
  #body { padding:10px; padding-bottom:60px; }
  #footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf;
  }
  #mytablediv { display:table; }
  #row { display:table-row; }
  #left, #content, #right {display:table-cell;}
  #left, #right {background-color:red;}
  </code></pre>
  
  <p>That's my full code. Now what I really want to do for <code>#mytablediv</code> is to fill the entire white space between the header and the footer.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/A4c8n/" rel="noreferrer">live jsFiddle example</a>.</p>