我正在尝试实现等高的列,其中一个包含扩展菜单。
我几乎可以使用下面的代码(基于此代码)运行它。您可以在此页面和此页面上看到列的高度相同。
唯一的问题是在后一页和任何其他短页上,内容下方都有一个空格。计算的高度是否包括隐藏的子菜单?如果是这样,我可以停止这样做还是需要使用不同的代码?
提前感谢您的任何指导!
简化的 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();
});