【发布时间】：2012-04-25 22:03:20
【问题描述】：
我正在尝试实现等高的列，其中之一包含扩展菜单。
我几乎使用下面的代码（基于this code）让它工作。您可以看到 this page 和 this page 上的列高度相同。
唯一的问题是，在后一页和任何其他短页上，内容下方都有一个空格。计算的高度是否包括隐藏的子菜单？如果是这样，我可以停止这样做还是需要使用不同的代码？
提前感谢您的指导！
简化的 HTML：
<div id="body-container">
<div id="primary-menu">
<div class="menu">
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item
<ul class="sub-menu" style="float: none; display: none; visibility: hidden;">
<li>Submenu item</li>
<li>Submenu item</li>
</li>
</ul>
</div>
</div>
<div id="container">
Main content
</div>
</div>
jQuery：
jQuery(document).ready( function(){
function equalHeight(){
var heightArray = jQuery("#body-container>div").map( function(){
return jQuery(this).height();
}).get();
var maxHeight = Math.max.apply( Math, heightArray);
jQuery("#container").height(maxHeight);
jQuery("#primary-menu").height(maxHeight);
}
equalHeight();
});
【问题讨论】：
-
不久前我有过类似的问题。看它。 stackoverflow.com/questions/7821184/…
-
感谢 Dejan，但这与我的问题中的代码相同。也就是说，它似乎在其计算中包含了隐藏菜单，因此在主页和其他较短的页面上留下了很大的空白。