【css布局】左右分布的导航菜单存在二级菜单的高度设置问题

在我们写菜单的时候，经常会在css用到中用到’height:100%‘这个属性。这个属性在一级菜单中使用没有问题，从父级元素上一层层传递，渲染准确。如果有二级菜单的存在，还传递’height:100%’，可能出现菜单高度不贴合底部的情况。先上图：

出现这个bug的时候我在网上看了很多博客，总结的解决的方法有这几种：
1、position:absolute：定义了后发现，虽然位置上没有改变，但是设置top,bottom这些属性没有改变，就算有改变，如果内容区域过长，菜单不会随着内容区域的变长而变长
2、javascript定义min-height/height：用document.body.clientHeight()获取页面的页高，再减去header的高度。这种有个问题，如果内容区域大于clientHeight，二级菜单的高度不会随着内容区域的变长而变长。
3、margin-bottom:-9999px,pading-bottom:9999px：这个定义会使得二级菜单的‘尾巴’特别长，而不是高度随着内容区域变化
4、height:100%:文章开头说明了，在层级没有这么复杂的时候，可以用这种方法，渲染也准确，层级多的时候就会有偏差，我实际遇到的问题是二级菜单总是差一点高度和内容区域的底部齐平。并且因为层级过多，不能保证每一层都加上了’height:100%'同时埋下了该属性失效的雷。