title: Html table height="100%" not filling parent height
body: <p>I have 2 tables in my container. One of it will stick to the bottom of the container and the other will fill the remaining height of the parent </p>
  
  <p>Style:</p>
  
  <pre><code>    .page
      {
          width: 21cm;
          min-height: 29.7cm;
          padding: 0.5cm;
          margin: 1cm auto;
          background: white;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          position: relative;
      }
  
  &lt;div class="page"&gt;
      &lt;table class="table1" style="height: 100%;"&gt;
          &lt;tr&gt;Supposed to fill remaining space&lt;/tr&gt;
      &lt;/table&gt;
      &lt;div style="position: absolute; bottom: 0;"&gt;
          &lt;table class="table2"&gt;
               &lt;tr&gt;Floats to the bottom&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want is for table1 to take up the remaining space left but it isnt filling up the space at all.</p>