0

我在让我的容器 div 与其孩子的高度相匹配时遇到了一些问题。

基本上我想要实现的是当里面的孩子打开时让容器高度增加。容器内有 2 个面板，单击时将独立滑动切换。他们都有不同的高度。我希望容器与当前打开的最大面板的高度相匹配。如果没有面板打开，则容器的高度应为“自动”。

所以简而言之，有 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/
4

1 回答 1

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

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

或者您可以通过使用如下所示的一段 css 代码来实现它

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

然后对于 .panel 这些：

.panel {
    height: 100%;
    position: absolute;
 }
于 2013-05-18T13:29:17.050 回答