div背景颜色不填充高度答案

【问题标题】：Div background-color doesn't fill the heightdiv背景颜色不填充高度
【发布时间】：2015-01-15 12:14:27
【问题描述】：

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

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

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

有人可以帮我解决我做错的事情吗？我认为它只是一个小东西，但我找不到它。

谢谢！

【问题讨论】：

height : 100% won't do.. 尝试像素/张贴小提琴
100% 高度表示与父元素高度相同，而不是窗口高度。那么，父母的身高是多少？
试试position: fixed; 和height: 100% 换成#menucontainer
float 和 position:absolute 不要在一起。
@MrLister 父元素由 jQuery 加载并且不包含高度，一些元素更小，然后一切正常，当然。这些父元素的高度取决于它们页面上有多少文本或表单。

标签： javascript jquery html css

【解决方案1】：

试试这个：

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

【讨论】：

感谢您的评论，但不幸的是，这并不能解决问题。当我这样做时，它只提供背景，直到菜单内列表的末尾，它与标题重叠
尽量使用Javascript所以

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：