Ajustement de la hauteur de la div à la hauteur de l'écran et fixez le pied de page en bas

J'ai un site où quand il n'y a pas assez de contenu du pied de page se déplace vers le haut et ne colle pas au fond. Im essayant de comprendre comment faire la division entre le pied de page et l'en-tête extensible à l'espace disponible pour le pied de page pour rester au fond et ne pas ressembler à ceci:

J'ai essayé de configurer mon hauteurs à 100%, mais ne fonctionne pas.

HTML:

<div id="wrapper">

    <div id="body_div">
        <section id="main_section">
        </section>
        <aside id="sidebar">                    
        </aside>
    </div>
    <footer id="footer">
        &copy; Copyright  by SimKessy
    </footer>
</div>

CSS:

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

C'est mon site http://www3.carleton.ca/clubs/sissa/html5/video.html
Vous pouvez voir ce que je veux dire quand vous allez à la mode écran en utilisant le menu latéral.