Question

我有div，其高度是固定的。在div内，由于divs内的内容，有两个divs高度动态变化。

<div id="panel">
    <div id="layerTree">

    </div>

    <div id="features">
        <div id="accordion_equip"></div>
        <div id="accordion_equip"></div>
    </div>
</div>

在features div内，有两个divs有手风琴。每当我们点击那个手风琴时，由于手风琴features div中的数据应该有一个垂直滚动条。

但是当我们为features div设置固定高度时，会出现垂直滚动条。但是我无法设置固定的高度，因为layerTree div高度也会根据内部内容发生变化。

那么，如何解决这个问题？

CSS：

#panel {
    width: 20%;
    height: 100%;
    float: right;
    position: relative;
    top: 5px;
}

#features {
    height: 365px;
    overflow-y: auto;
}

不幸的是，由于安全限制，我无法附加当前用户界面的任何图片。

Answer 1

您可以为此内容设置min-height。因此，当内容高度与min-height不同时，它会根据您的内容高度自动height。

#features {
    min-height: 365px;
    overflow-y: auto;
}

如果，您想要显示垂直滚动条，那么您可以在css规则下面设置。

#features {
    max-height: 365px;
    overflow-y: scroll;
}

Answer 2

更新css

#features {
    min-height: 365px;
    overflow-y: auto;
}

Answer 3

我用JS修复它。

            fixHeight = function() {
                var p = $('#layerTree').outerHeight();
                var featureHeight = 555 - p;
                $("#features").css("height", featureHeight);
            };

根据内容动态更改div高度，并在溢出时设置垂直滚动条。

3 个答案: