title: Fit height of div to screen height and fix footer to bottom
body: <p>I have a site where when there isn't enough content the footer moves up and doesn't stick to the bottom. Im trying to figure out how to make the div between the footer and the header stretch to the available space in order for the footer to remain at the bottom and not look like this: </p>
  
  <p><img src="https://i.stack.imgur.com/T1ELB.jpg" alt="enter image description here"></p>
  
  <p>I've tried setting my heights to 100% it but does not work. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;div id="body_div"&gt;
          &lt;section id="main_section"&gt;
          &lt;/section&gt;
          &lt;aside id="sidebar"&gt;                    
          &lt;/aside&gt;
      &lt;/div&gt;
      &lt;footer id="footer"&gt;
          &amp;copy; Copyright  by SimKessy
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      width: 100%; /*always specify this when using flexBox*/ 
      height:100%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      text-align:center;
      -webkit-box-pack:center; /*way of centering the website*/
      -moz-box-pack:center;
      box-pack:center;
      background:url('images/bg/bg9.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
  }
  #wrapper{
      max-width: 850px;
      display: -moz-box;
      display: -webkit-box; /*means this is a box with children inside*/
      -moz-box-orient:vertical;
      -moz-box-flex:1;
      -webkit-box-orient:vertical;
      -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
      background: rgba(0,0,0,0.7);
      height:100%;    
      z-index: 1;
  }
  #body_div{
      display: -webkit-box;
      -webkit-box-orient:horizontal;
      display: -moz-box;
      -moz-box-orient:horizontal;
      color:#000000;
      margin-top: 190px;
      height: 100%;
  }
  #main_section{
     /* border:1px solid blue;*/
      -webkit-box-flex: 1; 
      -moz-box-flex:1;
      margin: 20px;
      padding: 0px;
      height:100%;
      width: 100%;
  }
  </code></pre>
  
  <p>This is my site <a href="http://www3.carleton.ca/clubs/sissa/html5/video.html" rel="nofollow noreferrer">http://www3.carleton.ca/clubs/sissa/html5/video.html</a>
  You can see what I mean when you go to widescreen mode using the side menu. </p>