0

我正在尝试实现等高的列,其中一个包含扩展菜单。

几乎可以使用下面的代码(基于此代码)运行它。您可以在此页面此页面上看到列的高度相同。

唯一的问题是在后一页和任何其他短页上,内容下方都有一个空格。计算的高度是否包括隐藏的子菜单?如果是这样,我可以停止这样做还是需要使用不同的代码?

提前感谢您的任何指导!

简化的 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();
});
4

1 回答 1

0

Try using visiblity:collapse instead of visiblity:hidden.... Because hidden hides the content but it has the space of the content calculated... But collapse hides the content along with the space... try this...

于 2012-04-25T04:50:21.533 回答