根据其绝对位置后代

Question

我的html页面主体中有这个布局

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

主要的css：

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

带有id菜单的div是一个垂直导航菜单，可以垂直延伸。它的位置在css中设置为绝对值。 现在我遇到了这个问题：如果菜单延伸，它可能会与下面的页脚重叠，因为主要的高度没有相应地延长。一种解决方案是在菜单扩展后将main的高度设置为最大可能值，但这不是最佳的。我的问题是如何根据css的菜单后代使主区域的高度增长，以便重叠不会发生？感谢。

Answer 1

就像我在评论中说的那样，只有css才能做到这一点。

使用jquery这行就可以了。

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

如果菜单大小发生变化，您可以在页面加载或上进行此操作，将其放入更改菜单大小或<的代码中/ i>把它暂停：

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