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

【问题标题】：Changing the div height dynamically based on the content and setting a vertical scroll bar when it overflows.根据内容动态更改 div 高度，并在溢出时设置垂直滚动条。
【发布时间】：2017-05-16 05:48:41
【问题描述】：

我有一个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 的任何图像。

【问题讨论】：

上述安全限制是否也禁止您针对您的问题创建minimal reproducible example？用虚拟数据替换密码和银行账户，如果你必须......
@AndreiGheorghiu 正在研究它
我可以期待任何你想要的小提琴或图像吗？这样我就可以修复它

标签： html css height overflow

【解决方案1】：

更新css

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

【讨论】：

不起作用，当 max-height 为 100% 时，它不会显示垂直滚动条。
它适用于定义的宽度。但是每当 layerTree 内容发生变化时，功能 div 的高度仍然是 365px。 :(

【解决方案2】：

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

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

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

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

【讨论】：

当我点击手风琴时，它也不会显示垂直滚动条。
如果你想显示竖线。你可以设置 max-height: 365px;和溢出-y：滚动；

【解决方案3】：

我使用 JS 修复了它。

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

【讨论】：