title: How to stretch the table to fill all available space
body: <p>This question might be simple, but I cannot find an answer.</p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;div&gt;
    some text
    &lt;div&gt;
      &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;
              Test
          &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>body,html {
      height: 100%;
      width: 100%;
      margin: 0;
  }
  
  table {
      height: 100%;
      margin: 0 auto;
      background: red;
  }
  </code></pre>
  
  <p>How can I stretch the table vertically <strong>without</strong> change of the height property of <code>div</code>? I want the <code>table</code> to have <code>height: 100%</code> but it does not work because the outer containers do not have a fixed height (as I understand).</p>
  
  <p><a href="http://jsfiddle.net/8qedxug9/" rel="nofollow noreferrer">http://jsfiddle.net/8qedxug9/</a></p>