title: Make a div fill the height of the remaining screen space
body: <p>I am working on a web application where I want the content to fill the height of the entire screen.</p>
  
  <p>The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.</p>
  
  <p>I have a header <code>div</code> and a content <code>div</code>. At the moment I am using a table for the layout like so:</p>
  
  <p>CSS and HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#page {
      height: 100%; width: 100%
  }
  
  #tdcontent {
      height: 100%;
  }
  
  #content {
      overflow: auto; /* or overflow: hidden; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="page"&gt;
      &lt;tr&gt;
          &lt;td id="tdheader"&gt;
              &lt;div id="header"&gt;...&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="tdcontent"&gt;
              &lt;div id="content"&gt;...&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The entire height of the page is filled, and no scrolling is required.</p>
  
  <p>For anything inside the content div, setting <code>top: 0;</code> will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting <code>header</code> inside <code>content</code> will not allow this to work.</p>
  
  <p>Is there a way to achieve the same effect without using the <code>table</code>?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Elements inside the content <code>div</code> will have heights set to percentages as well. So something at 100% inside the <code>div</code> will fill it to the bottom. As will two elements at 50%.</p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside <code>#content</code> would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.</p>