CSS 100% height with header and footer

Question

I am having difficulties achieving Css 100% so my website can look right in every web browser. I followed a tutorial I found HERE but no luck in getting it working. I have an example that contains a footer. This footer is also not in place. Also, I am trying to have the surrounding black frame cover my footer. Is there something I am doing wrong?

For better details please look at my LIVE EXAMPLE

CSS

<style>
html,body {
    padding: 0px;
    margin: 0px;
    background: #333333;
    background-size: 100%;
    line-height: 130%;
    height: 100%
    font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;   
    font-size: 90%;
    color: #5e5e5e;

}

/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper i the background. ******/

#colorblock {
    position: absolute;
    top: 60px;
    left: 0px;
    background: #c69a55;
    z-index: -1;
    height: 65px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}


/****** WRAPPER: this is the light gray box that is the background for all of the content. DO NOT EDIT. ******/

#container {

    z-index: 1;
    width: 850px;
    position: relative;
    margin: 0 auto;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */

    }

#contentArea{

       padding:1em 1em 5em;
       min-height:700px;
       width: 850px;
       position:relative;
       background: #f2f2f2;
       border-right: 15px solid #000000;
       border-left: 15px solid #000000; 
       position: relative;

}    

/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/

#header {
    width: 100%;
    height: 180px;
}



/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/

#clear {
    clear: both;
    margin-bottom: 10px;
}

#addSpace{
    padding-bottom:7px; 
}


.bottomNav {
    margin-right:auto;
    margin-left:auto;
    width:880px;
    height: 200px;
    background: #7a7a7a;


}

#footer{color:#FFF; position:absolute; bottom:0; width:100%; padding-bottom:10px; padding-top:10px;}

</style>

Answer 1

to set the footer in place you just need to reset width: 905px; in .bottomNav class

Answer 2

use ( width: calc ) property in css

for example. u need header 100px and footer 100px with 100% content height

css

body, html{height:100%; margin:0px;}
.header{height:100px;}
.footer{height:100px;}
.content{height: 100%;
    height: -webkit-calc(100% - 200px);
    height: -moz-calc(100% - 200px);
    height: calc(100% - 200px);
}

we set -200 bcoz header height 100px + footer height 100px so 100+100 = 200