手风琴布局在改变字体大小时未使用 CSS calc(）填充可用高度

Accordion layout not filling available height using CSS calc() when varying the font-size

本文关键字：calc 填充高度 CSS 未使用布局改变字体小时手风琴更新时间：2023-09-26

我面临的情况是我正在构建的手风琴控件。根据定义，此示例中有四个部分。目标是允许"开放"部分完全填充可用的垂直空间。为了达到这种效果，我使用以下height:计算（由反复试验确定 - 我们称之为幻数/黑客）：

height:calc(100vh - 11.9em);

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

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

我真的很想让这个例子工作，但更重要的是我想了解布局计算的进出（有没有关于这个的好网络资源/教程）？

在我看来，每 10% 的差异相当于您计算的高度的 1.7em（反）差异。 1.7em 是手柄字体大小加上其填充。

虽然不确定数学。