Javascript 更改字体大小时，手风琴布局未使用CSS calc（）填充可用高度

我所面临的情况是我正在构建一个手风琴控件。根据定义，本示例中有四个部分。目标是让“开放”部分完全填满可用的垂直空间。为了达到这一效果，我使用了以下

高度：

计算（由试验和错误确定-我们称之为幻数/hack）：

对于给定的

字体大小：

，结果是可以接受的，但是当我增大

字体大小：

时，底部会出现一个间隙-当我减小

字体大小：

时，手风琴超过了可用的垂直空间

这是我用来解决这个问题的方法

---

我真的很想让这个例子起作用，但更重要的是，我想了解布局计算的输入和输出（是否有好的web资源/教程）。1.7em是句柄字体大小及其填充

---

不过，我不确定数学原理。

在进一步的实验之后，我清楚地认识到，使用

px

（像素单位）对页面大小调整/缩放是有问题的-在JSFIDLE中，我将所有内容都转换为

em

（当前字体的大小），现在我有了一个在所有比例下都表现良好的工作示例。。。。因为当页面调整大小时，

字体大小

也会自动调整大小，所以我仍然担心，为什么在计算

高度

时会出现神奇的值-哪些元素大小包含此值<代码>高度：计算（100vh-11.9em），我仍然无法找到一个好的资源来教你如何逻辑地确定缩放因子/值，比如在。。。

height:calc(100vh - 11.9em);