title: CSS - 100% Height with Header and Footer
body: <p>I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:</p>
  
  <p><img src="https://i.stack.imgur.com/YxFfj.jpg" alt="enter image description here"></p>
  
  <p>I can get the header and main div to work. Like this:</p>
  
  <pre><code>    &lt;div id="wrapper"&gt;
  
          &lt;div class="header_div"&gt;HEADER&lt;/div&gt;
          &lt;div class="main_div"&gt;MAIN&lt;/div&gt;
          &lt;div class="footer_div"&gt;FOOTER&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>With this CSS:</p>
  
  <pre><code>html {
      height: 100%;
   }
  
   body {
      margin: 0;
      padding: 0;
      height: 100%;
   }
  
  .header_div{
  
      height: 40px;
      width: 100%;
      background-color: #000000;
  
  }
  
  .main_div{
  
      margin-bottom:40px;
      margin-top:40px;
      position:absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      background-color: red;
  }
  
  
  .footer_div{
  
      position: relative;
      height: 40px;
      width: 100%;
      background-color: blue;
  }
  </code></pre>
  
  <p>So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with <code>position: relative</code> it's putting the footer on top of the main div. If I use <code>position:absolute</code> it puts it underneath the main div.</p>
  
  <p>I am sure I am just doing this wrong because CSS is not my thing.</p>
  
  <p>Any help on this would be great.</p>
  
  <p>Thanks</p>