div自适应屏幕高度

问题描述：本地项目页面左侧菜单点击父亲节点拉伸出子节点后，演示的阴影不能覆盖所有的左侧菜单，现象如下图：此时整个演示的页面要通过滚动条才能看到整个菜单内容

整个菜单都放在div中,div的父亲节点为body，此时设置了height为100%，依然没有效果

<div class="leftpanel">

开始考虑的解决方案是div自适应屏幕大小，尝试方案如下：

尝试方案：

1.通过css样式修改，设置最小高度

_height:200px; /* css 注解： 仅IE6设别此属性，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 */ 
min-height:200px; /* css注释

无效

2.设置body和html的height都为100%

无效

3.通过js获取到屏幕高度，然后设置div的高度为屏幕高度

<div id="test" style=" border: solid 1px #f00; "></div>
<script type="text/javascript">
autodivheight();
function autodivheight(){ //函数：获取尺寸
    //获取浏览器窗口高度
    var winHeight=0;
    if (window.innerHeight)
        winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight)
        winHeight = document.documentElement.clientHeight;
    //DIV高度为浏览器窗口的高度
    document.getElementById("test").style.height= winHeight +"px";
  
}
window.οnresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度
</script>

获取到屏幕高度之后依然无效，开始考虑这个问题并不是div高度等于屏幕的高度，而是当子菜单拉伸出来后，多余的菜单已经超过了div的高度（也就是屏幕的高度，所有产生了滚动条），此时给div增加了一个css样式后，问题解决！

display: table;