Question

我正在尝试实现相同高度的列，其中一列包含扩展菜单。

我几乎使用下面的代码（基于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();
});

Answer 1

尝试使用visiblity：collapse而不是visiblity：hidden ....因为隐藏隐藏内容但是它有内容的空间计算...但是db会隐藏内容和空格... {{3} }

jQuery与动态内容相等的div高度

1 个答案: