title: How to make the main content div fill height of screen with css
body: <p>So I have a webpage with a header, mainbody, and footer.
  I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
  My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with <code>top: 40</code> (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.</p>
  
  <p>I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    padding: 0;
  }
  
  header {
    height: 40px;
    width: 100%;
    background-color: blue;
  }
  
  #maincontent {
    background-color: green;
    height: 100%;
    width: 100%;
  }
  
  footer {
    height: 40px;
    width: 100%;
    background-color: grey;
    position: absolute;
    bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;test&lt;/title&gt;
    &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;div id="maincontent"&gt;
  
    &lt;/div&gt;
  
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone knows the answer?</p>