Question

我在使容器div与其子女的身高相匹配时遇到了一些问题。

基本上我想要实现的是当里面的孩子打开时让容器高度增加。容器内部有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");
    }

});

如果我困惑你真的很抱歉！：）

这是我现在所处的地方...

http://jsfiddle.net/mSswY/

Answer 1

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;
 }

JQUERY - 容器匹配最大高度

1 个答案: