javascript - 改变字体大小时， Accordion 布局未使用 CSS calc() 填充可用高度

Question

我面临的情况是我正在构建 Accordion 控件。根据定义，此示例中有四个部分。目标是让“开放”部分完全填满可用的垂直空间。为实现此效果，我使用以下 height: 计算(通过反复试验确定 - 我们称其为魔数(Magic Number)/hack):

height:calc(100vh - 11.9em);

对于给定的 font-size:，结果是可以接受的，但是当我增加 font-size: 时，底部会出现一个空隙 - 当我减少font-size: Accordion 超出了可用的垂直空间...

这是 JSFIDDLE我为解决这个问题而构建的。

我真的想让这个例子工作，但更重要的是我想了解布局计算的来龙去脉(是否有关于此的良好网络资源/教程)？

Answer 1

在我看来，每 10% 的差异就相当于计算出的高度相差 1.7em(倒数)。 1.7em 是句柄字体大小加上它的填充。

虽然不确定数学。