JQUERY - 容器匹配最大高度

我遇到了一些問題，讓我的容器div匹配其子女的身高。JQUERY - 容器匹配最大高度

基本上我試圖實現的是讓內部的兒童打開時增加容器高度。容器內有2個面板，點擊時將獨立滑動。他們都有不同的高度。我希望容器能夠匹配當前打開的最大面板的高度。如果沒有面板打開，則容器的高度應爲「自動」。

所以簡而言之，theres 2面板，每個面板都有不同的高度。我希望容器與可用的最大面板的高度相匹配（打開）。如果兩個面板都打開，並且用戶關閉了最大面板，那麼容器應該補償以符合另一面板的高度。如果用戶關閉兩個面板，容器的高度應該返回到「自動」

這是我的代碼示例：

<div class="container"> 
<a href="#panel1">Panel 1 Button</a> 
<a href="#panel2">Panel 2 Button</a> 

<div id="panel1" class="panel"></div> 
<div id="panel2" class="panel"></div> 
</div> 

$(document).ready(function() { 

// Add 'Height' to Content container if window is too small 
    var content = $(".container"); 
    var childHeight = $('#panel1, #panel2').height(); 

    if ($(content < childHeight)) { 
    $(content).css("height", childHeight + "px"); 
    } 

});

如果我讓你感到困惑我真的對不起！ :)

繼承人到這裏我已經得到了當前一個的jsfiddle ...

http://jsfiddle.net/mSswY/

來源

2013-05-18 user2350789

var heights = $("div.panel").map(function() 
    { 
     return $(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights);

或如下圖所示

.container { 
    overflow: hidden; 
    position: relative; 
}

您可以通過使用一塊CSS代碼實現它

然後對於.panel這些：

.panel { 
    height: 100%; 
    position: absolute; 
}

來源

2013-05-18 13:29:17

JQUERY - 容器匹配最大高度

回答

相關問題