同じ高さの列を作成しようとしています。そのうちの1つに拡張メニューが含まれています。
以下のコード（このコードに基づく）を使用して、ほぼ動作しています。このページとこのページでは、列の高さが同じであることがわかります。
唯一の問題は、後者のページやその他の短いページでは、コンテンツの下にスペースがあることです。計算された高さは非表示のサブメニューを含みますか？もしそうなら、これをやめることはできますか、それとも別のコードを使用する必要がありますか？
よろしくお願いします！
簡略化された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();
});