为什么“计算”在短时间内无法正常工作？

Question

我有一个网格布局，其中有一个id为div的div：Highlights，占12列的最后4列。我想用以下公式修正其高度： height = width *（9/8）+ 66px ;我正在尝试通过具有window.onload和window.resize事件的javascript来实现此功能，但是我想通过CSS来实现。

.Highlights {
grid-column-start: 9;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;

width: 100%;

--widthX: 100%;
--heightX: calc(var(--widthX) / 8 * 9 + 66px);
height: var(--heightX);
}

此外，如果您能告诉我什么是这样做的好方法。 我尝试了以下方法：

1. 填充，但是在内部添加div时会导致很多问题。如果您可以向我推荐一个很好的指南。
通过在加载和调整大小事件时在窗口上动态设置
2. javascript。

有没有简单的方法可以使div保持一定比例，而在此div中添加其他div时我无需考虑任何事情。

我已经在堆栈溢出中看到了很多文章，但是它们大多数都使用这两种方法。

此外，我使用的不是CSS，而是使用较少的东西，是否有什么可以帮助我的更具体的东西？