Div background-color doesn't fill the height

Question

I'm struggling with the following. My index page is made out of 3 divisions. A header div (not showing on the screenshot), a menu div (left-side on the screenshot) and a content container div (right-side on the screenshot).

As you can see, the menu divs background doesn't fill the height of the screen vertically. This is my code of the menu div. The div also contains a list but I don't think this is necessary to fix this.

#menucontainer {
    float:left;
    width:200px;
    background-color:#dddddd;
    position:absolute;
    height:100%;
    overflow:hidden;
}

Could someone please help me with what I am doing wrong. I think its just a little thing but I can't find it.

Thanks!

Answer 1

Try this :

#menucontainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  margin-top: -2.5em;
  background-color:#dddddd;
}

Answer 2

#menucontainer {
    float:left;
    width:200px;
    top:0;
    left:0;
    background-color:#dddddd;
    position:absolute;
    height:100%;
    overflow:hidden;
}

Answer 3

In Javascript :

<script type="text/javascript">
   // allocate the function to the window scrolling
   window.onscroll = menucontainer;

   var startingY = false;

   function menucontainer() {

       // First top value recovery
       if (!startingY) startingY = parseInt(document.getElementById("menucontainer").style.top);

       // Scroll top value
       if (window.pageYOffset) {        
           var yrt = window.pageYOffset;
       } else if (document.body.scrollTop){
           var yrt = document.body.scrollTop;
       } else {
           var yrt = document.documentElement.scrollTop;
       }

       document.getElementById("menucontainer").style.top = (yrt + startingY)+ "px";
   }
</script>

and

<div id="menucontainer">
...
</div>