0

同じ高さの列を作成しようとしています。そのうちの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();
});
4

1 に答える 1

0

visiblity：hiddenの代わりにvisiblity：collapseを使用してみてください。hiddenはコンテンツを非表示にしますが、コンテンツのスペースが計算されているためです...しかし、collapseはスペースとともにコンテンツを非表示にします...これを試してください...

于 2012-04-25T04:50:21.533 に答える