title: Have a table fill the remaining height of its container
body: <p>I have a fixed size container with an unknown number of self sizing paragraphs and possibly other elements. I also have a table after that content. I want the table to fill the remaining height of the container.</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code>​&lt;div id="container"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis. Sed semper dui sed ante. Sed luctus tincidunt nisl. Proin iaculis adipiscing nisl. Class aptent taciti sociosqu ad litora amet.&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur cras amet.&lt;/p&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;One&lt;/th&gt;
                  &lt;th&gt;Two&lt;/th&gt;
                  &lt;th&gt;Three&lt;/th&gt;
                  &lt;th&gt;Four&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;111&lt;/td&gt;
                  &lt;td&gt;222&lt;/td&gt;
                  &lt;td&gt;33333&lt;/td&gt;
                  &lt;td&gt;4444&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;111&lt;/td&gt;
                  &lt;td&gt;222&lt;/td&gt;
                  &lt;td&gt;33333&lt;/td&gt;
                  &lt;td&gt;4444&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;111&lt;/td&gt;
                  &lt;td&gt;222&lt;/td&gt;
                  &lt;td&gt;33333&lt;/td&gt;
                  &lt;td&gt;4444&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;111&lt;/td&gt;
                  &lt;td&gt;222&lt;/td&gt;
                  &lt;td&gt;33333&lt;/td&gt;
                  &lt;td&gt;4444&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>#container {
      width: 500px;
      height: 500px;
      background: red;
  }
  
  p {
      margin-bottom: 20px;
  }
  
  table {
      height: 100%;
      width: 100%;
  }
  
  table,
  table th,
  table td{
      border: 1px solid black;
  }
  </code></pre>
  
  <p>Doing this causes the table to take the height of the container and not just the remaining area. I've tried setting the container and the children as table and table-row in CSS and that either causes the other elements to be too large or to loose within their margin.</p>
  
  <p>A fiddle can be found at: <a href="http://jsfiddle.net/QLwkU/" rel="nofollow noreferrer">http://jsfiddle.net/QLwkU/</a></p>
  
  <p>I was hoping for a pure CSS solution to this, but I don't have a problem if it is a reasonable and reusable jQuery solution.</p>
  
  <p>I've tried:</p>
  
  <pre><code>var totalHeight = 0;
  $('#container').children(':not(table)').each(function(){
      totalHeight += $(this).outerHeight(true);
  });
  $('#container table').css({'height': ($('#container').outerHeight() - totalHeight)});
  </code></pre>
  
  <p>But that makes it somewhat more difficult to add a margin to the table if one was needed.</p>
  
  <p>Any thoughts or suggestions would be greatly appreciated.</p>