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

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

很遗憾，由于安全限制，我无法附上当前 UI 的任何图像。

Answer 1

更新css

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

Answer 2

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

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

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

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

Answer 3

我用 JS 修复了它。

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

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

Changing the div height dynamically based on the content and setting a vertical scroll bar when it overflows.

html

css

height

overflow