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

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 menu 的div 是一个垂直导航菜单，可以垂直扩展。它的位置在 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);