根据 div 元素的绝对位置后代扩展其高度

Question

我的html页面正文中有这样的布局

<div id="main">
...
<div id="menu">
</div>
...
</div>
<footer>

css for main:

#main {
width:100%;
min-height:100%;
height:100%;
background-color:#cacaca;
background-size:cover;*/
position:relative;
display:block;
z-index:0
}

div with id menu是一个垂直导航菜单，可以垂直扩展。它的位置在css中被设置为绝对。现在我有这个问题:如果菜单扩展，它可能与下面的页脚重叠，因为主的高度没有相应地扩展。一种解决方案是将main的高度设置为菜单扩展后的最大可能值，但这不是最优的。我的问题是，我怎么能使主区域的高度根据它的菜单后代css增长，使重叠不会发生?谢谢。

Answer 1

就像我在评论中说的那样，无论如何都不能只使用css来做到这一点。

使用jquery这一行就可以了

$('#main').height($('#menu').height());

你可以在页面加载或者如果菜单的大小改变了把它放在改变菜单大小的代码中或者把它放在超时中:

setTimeout(function(){
    var mainHeight = $('#main').height();
    var menuHeight = $('#menu').height();
    if(mainHeight < menuHeight) {
        $('#main').height($('#menu').height());
    }
},2);