Footer overlaps content when content is 100%

Question

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 & CSS:

HTML:

    <!--Begin Content-->     
<div id="content_pro">
    <div id="pro_menu">
        <div class="grey"><img class="pro_img" src="images/bannehof.jpg"><a href="subpages/bannehof.html" target="targetframe" class="pro_title">Bannehof</a><br /><br />Deuren c.a. 750</div>
        <div class="white"><img class="pro_img" src="images/casaconfetti.jpg"><a href="subpages/casaconfetti.html" target="targetframe" class="pro_title">Casa Confetti</a><br /><br />Deuren c.a. 850</div>
        <div class="grey"><img class="pro_img" src="images/citymax.jpg"><a href="subpages/citymax.html" target="targetframe" class="pro_title">Citymax</a><br /><br />Deuren c.a. 2200</div>
        <div class="white"><img class="pro_img" src="images/nielsborghplaats.jpg"><a href="subpages/nielsborghplaats.html" target="targetframe" class="pro_title">Niels Borghplaat</a><br /><br />Deuren c.a. 15</div>
        <div class="grey"><img class="pro_img" src="images/ronssehof.jpg"><a href="subpages/ronssehof.html" target="targetframe" class="pro_title">Ronssehof</a><br /><br />Deuren c.a. 2500</div>
        <div class="white"><img class="pro_img" src="images/rusthoeve.jpg"><a href="subpages/rusthoeve.html" target="targetframe" class="pro_title">Rusthoeve</a><br /><br />Deuren c.a. 255</div>
        <div class="grey"><img class="pro_img" src="images/westerbeek.jpg"><a href="subpages/westerbeek.html" target="targetframe" class="pro_title">Westerbeek</a><br /><br />Deuren c.a. 350</div>
    </div>
        <iframe class="pro_subpage" src="subpages/bannehof.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ></iframe>
</div>
<!--End Content-->
</div>    
<!--Begin Footer-->
    <footer>
    <div id="foo_container">
        <div id="foo_navs">
            <div id="foo_nav_1">
                &raquo <a href="../index.html">Home</a><br />
                &raquo <a href="../deuren">Deuren</a><br />
                &raquo <a href="../hangensluitwerk">Hang en Sluitwerk</a><br />
                &raquo <a href="#">Projectbasis</a><br />
            </div>
            <div class="foo_sep"></div>         
            <div id="foo_nav_2">
                &raquo <a href="../particulier">Particulier</a><br />
                &raquo <a href="../recenties">Recenties</a><br />
                &raquo <a href="../fotos">Foto's</a><br />
                &raquo <a href="../werkwijze">Werkwijze</a>
            </div>
            <div class="foo_sep"></div>
            <div id="foo_nav_3">
                &raquo <a href="../contact">Contact</a>
            </div>
            <div class="foo_sep"></div>
            <div id="copyright">
                Copyright &copy;<br /> <a href="http://www.grafisch-centrum.nl" target="_blank">Grafisch Centrum Etten-Leur</a> 2014
            </div>
        </div>
        <div id="foo_keurmerk">
            <a href="http://www.inbraakproef.nl" target="_blank"><img class="foo_inbraak" src="../images/pkvw-logo.png" /></a>
            <a href="../images/VCA07042011Roos.tiff"><img class="foo_vca" src="../images/vca1.png"/></a>
            <div class="foo_sep_keurmerk">
        </div>
        </div>
        </div>
    </footer>
<!--End Footer-->

CSS:

* {
    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;
}

Thanks!

Answer 1

First of all want you remove this step from your css

* {
    width:100%;
    margin:0 auto;
    padding: 0;
    font-family:arial;
    overflow-x: hidden;
    position: relative;
}

You can leave only those but sometimes it extra rules and no need to use it

* {
    margin:0;
    padding:0;
}

font-family you need to use in body tag - like this

body {
    font: Arial, Helvetica, sans-serif;
}

As for your question. Here is an example how to stick footer to the bottom (as I correctly understanding what you trying to achieve)

HTML

<div id="wrapper">
    <div class="w1">sdfsdfsd</div>
</div>
<footer id="footer">ssdfsdfs</footer>

CSS

html, body {
    height: 100%;
    margin: 0;
}
#wrapper {
    min-height: 100%;
    width: 100%;
}
.w1 {padding-bottom:50px /*footer height*/;}
#footer {
    height: 50px;
    margin-top: -50px; /*equal to footer height */
    position: relative;
    width: 100%;
}

Answer 2

If i understood your question correctly then Something like this will work I guess. Just added padding .

Here is fiddle http://jsfiddle.net/9cKTH/

* {
    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%;
    padding-bottom:50px;
}

#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;
}

This is what you wanted??