title: Footer overlaps content when content is 100%
body: <p>What I want is that my .content_pro always sticks to the top of the footer, what resolution your screen is. But when I say height: 100% it gets under my footer. I'. struggling with this for a few hours but it won't work. Here is my HTML &amp; CSS:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!--Begin Content--&gt;     
  &lt;div id="content_pro"&gt;
      &lt;div id="pro_menu"&gt;
          &lt;div class="grey"&gt;&lt;img class="pro_img" src="images/bannehof.jpg"&gt;&lt;a href="subpages/bannehof.html" target="targetframe" class="pro_title"&gt;Bannehof&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 750&lt;/div&gt;
          &lt;div class="white"&gt;&lt;img class="pro_img" src="images/casaconfetti.jpg"&gt;&lt;a href="subpages/casaconfetti.html" target="targetframe" class="pro_title"&gt;Casa Confetti&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 850&lt;/div&gt;
          &lt;div class="grey"&gt;&lt;img class="pro_img" src="images/citymax.jpg"&gt;&lt;a href="subpages/citymax.html" target="targetframe" class="pro_title"&gt;Citymax&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 2200&lt;/div&gt;
          &lt;div class="white"&gt;&lt;img class="pro_img" src="images/nielsborghplaats.jpg"&gt;&lt;a href="subpages/nielsborghplaats.html" target="targetframe" class="pro_title"&gt;Niels Borghplaat&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 15&lt;/div&gt;
          &lt;div class="grey"&gt;&lt;img class="pro_img" src="images/ronssehof.jpg"&gt;&lt;a href="subpages/ronssehof.html" target="targetframe" class="pro_title"&gt;Ronssehof&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 2500&lt;/div&gt;
          &lt;div class="white"&gt;&lt;img class="pro_img" src="images/rusthoeve.jpg"&gt;&lt;a href="subpages/rusthoeve.html" target="targetframe" class="pro_title"&gt;Rusthoeve&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 255&lt;/div&gt;
          &lt;div class="grey"&gt;&lt;img class="pro_img" src="images/westerbeek.jpg"&gt;&lt;a href="subpages/westerbeek.html" target="targetframe" class="pro_title"&gt;Westerbeek&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Deuren c.a. 350&lt;/div&gt;
      &lt;/div&gt;
          &lt;iframe class="pro_subpage" src="subpages/bannehof.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" &gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;!--End Content--&gt;
  &lt;/div&gt;    
  &lt;!--Begin Footer--&gt;
      &lt;footer&gt;
      &lt;div id="foo_container"&gt;
          &lt;div id="foo_navs"&gt;
              &lt;div id="foo_nav_1"&gt;
                  &amp;raquo &lt;a href="../index.html"&gt;Home&lt;/a&gt;&lt;br /&gt;
                  &amp;raquo &lt;a href="../deuren"&gt;Deuren&lt;/a&gt;&lt;br /&gt;
                  &amp;raquo &lt;a href="../hangensluitwerk"&gt;Hang en Sluitwerk&lt;/a&gt;&lt;br /&gt;
                  &amp;raquo &lt;a href="#"&gt;Projectbasis&lt;/a&gt;&lt;br /&gt;
              &lt;/div&gt;
              &lt;div class="foo_sep"&gt;&lt;/div&gt;         
              &lt;div id="foo_nav_2"&gt;
                  &amp;raquo &lt;a href="../particulier"&gt;Particulier&lt;/a&gt;&lt;br /&gt;
                  &amp;raquo &lt;a href="../recenties"&gt;Recenties&lt;/a&gt;&lt;br /&gt;
                  &amp;raquo &lt;a href="../fotos"&gt;Foto's&lt;/a&gt;&lt;br /&gt;
                  &amp;raquo &lt;a href="../werkwijze"&gt;Werkwijze&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="foo_sep"&gt;&lt;/div&gt;
              &lt;div id="foo_nav_3"&gt;
                  &amp;raquo &lt;a href="../contact"&gt;Contact&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="foo_sep"&gt;&lt;/div&gt;
              &lt;div id="copyright"&gt;
                  Copyright &amp;copy;&lt;br /&gt; &lt;a href="http://www.grafisch-centrum.nl" target="_blank"&gt;Grafisch Centrum Etten-Leur&lt;/a&gt; 2014
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="foo_keurmerk"&gt;
              &lt;a href="http://www.inbraakproef.nl" target="_blank"&gt;&lt;img class="foo_inbraak" src="../images/pkvw-logo.png" /&gt;&lt;/a&gt;
              &lt;a href="../images/VCA07042011Roos.tiff"&gt;&lt;img class="foo_vca" src="../images/vca1.png"/&gt;&lt;/a&gt;
              &lt;div class="foo_sep_keurmerk"&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;!--End Footer--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      width:100%;
      margin:0 auto;
      padding: 0;
      font-family:arial;
      overflow-x: hidden;
      position: relative;
  }
  
  html, body {
      height: 100%;
  }
  
      #content_pro {
      overflow: hidden;
      z-index: 9;
      height: 100%;
  }
  
  #pro_menu {
      height: 84%;
      width: 380px;
      position: absolute;
      float: left;
      overflow-y: scroll;
      margin: 80px 0px 25px 0px;
      overflow-x: hidden;
      z-index: 999;
  }
  
  footer, .push {
      width: 100%;
      background-color: #eb691e;
      height: 100px;
      z-index: 10;
      overflow: hidden;
  }
  </code></pre>
  
  <p>Thanks!</p>