div背景色未達到高度

Question

我正在努力解決以下問題。 我的索引頁面由3個分區組成。 標頭div（在屏幕截圖中未顯示），菜單div（在屏幕截圖的左側）和內容容器div（在屏幕快照的右側）。

如您所見，菜單divs背景不會垂直填充屏幕的高度。 這是我的菜單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>