whats the most common mistake for having a CSS 100% height div?

Alrighty,

I'm going to try to explain what I have going on. Let me know if you need more information.

Basically, I have a div container, and I have it styled at height:100%; It will do 100% but it will only be 100% for the current browser/window size.

For example: if I maximize the browser, the container will do 100%, but if I scroll down, that container's height only goes as much as whatever the browser height was.

Another example: if I minimize the browser to a certain size and refresh the page, the container will go 100% again to the window size only. So if I maximize the browser, the height container will still be the same height has if the browser was minimize.

So if I have a long page, the container doesn't go all the way down to the page, the container only goes so far as the window's height size when the page loads.

I'm trying to get the container to go all the way 100% till the bottom of the page, even if I have a footer or header, the container should be 100% between the two.

So I'll try to post up the most relevant code:

body,html
 {
    display:block;
    position:relative;
 }
 #container_100percent
 {
    overflow-x:hidden;
    position:relative;
    overflow-y:auto;
    width:20%;
    min-height:100%;
    height:100%;
    float:right;
 }
 
 
 <div>
   <div id="container_100percent">
      <!-- some stuff !-->
   </div>
 </div>
 

---