javascript - 如何实现div block 高度的动态计算？

Question

我是 CSS 和 HTML 布局方面的新手。我遇到了一些问题。如何实现div block 高度的动态计算？在我的示例中存在两个嵌套的 div block 。包含可以具有不同大小的图表图例的包装器和内容 block 。我需要，如果图例的大小更多的包装 block ，滚动条出现，否则不会。我怎样才能达到它？通过 CSS 或 JS 等。我试着写这样的东西，但这段代码绑定(bind)到恒定的 block 大小。如果内容大小大于嵌套 block ，则滚动条无助于查看隐藏内容。另外我不得不说我使用 Amcharts 框架来生成图表 https://imgur.com/FaJ9NAo在这里你可以看到代码的结果(抱歉，我没有以正确的方式附加图片的声誉)

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}
#chartlegenddiv { /*Legend content block*/
    height: 280px; /* need auto computing here */
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    height: 200px;
    float: right;
    overflow-y: auto;
}

Answer 1

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    max-height: 70px;
    float: right;
    overflow-y: auto;
}

<div id="chartlegendwrapper"><div>1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
</div></div>

您可以从 #chartlegenddiv 中删除 height。在 #chartlegendwrapper 上将 height 替换为 [max-height][1]。

没有高度与 height: auto 相同。

From MDN :

The browser will calculate and select a height for the specified element.