Css 扩展div元素'；基于其绝对位置的子体的高度

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

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

id菜单为垂直导航菜单，可垂直扩展。它的位置在css中设置为绝对。

---

现在我有一个问题：如果菜单扩展，它可能会与下面的页脚重叠，因为main的高度没有相应地扩展。一种解决方案是在扩展菜单后，将main的高度设置为可能的最大值，但这不是最优的。我的问题是，如何使用css使主区域的高度根据其菜单子体增长，从而避免重叠？谢谢。

就像我在评论中说的那样，仅仅使用css是无法做到这一点的。 使用jquery这一行就可以了

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

您可以在页面加载时执行此操作，或者如果菜单的大小正在更改，请将其放入更改菜单大小的代码中，或者将其放入超时：

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

setTimeout（函数（）{
var mainHeight=$（'#main'）.height（）；
var menuHeight=$（“#菜单”）.height（）；
如果（主高度<菜单高度）{
$（'主'）.height（$（'菜单'）.height（））；
}
},2);

您可以使用jquery实现这一点，仅使用css这是不可能的，但使用javascript是非常可行的。谢谢。似乎我最终不得不使用javascript。

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