Div背景颜色不会填充高度

Question

我正在努力解决以下问题。 我的索引页面由3个部门组成。 标题div（未在屏幕截图中显示），菜单div（屏幕截图左侧）和内容容器div（屏幕截图右侧）。

如您所见，菜单div背景并未垂直填充屏幕高度。 这是我的菜单div的代码。 div还包含一个列表，但我不认为这是解决这个问题的必要条件。

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

有人可以帮我解决我做错了什么。我认为这只是一件小事，但我无法找到它。

谢谢！

Answer 1

试试这个：

#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

在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>

和

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