是否可以在react js中将'px'和'vh'组合成1个组件的高度

Question

我有一些组件，其中一些用 px 调整大小。其他我想要可变大小。但是，由于组件具有固定的 px 高度，因此可变大小的组件不是页面的恒定百分比。所以我希望一个组件大约是屏幕高度（'80vh'）的 80% 减去另一个组件的高度。我希望使用类似的东西

style={{height:'80vh-40px'}} 

但这不起作用。

我找到了这个页面很接近，但我的程序无法识别该 calc 函数。我是否需要从某个图书馆要求它？

关于如何使这项工作的任何想法？

谢谢！

Answer 1

我在 React.js 组件中使用这样的语法：

<div height='calc(100vh - 400px)'></div>

这个对我有用。在 css 文件中，我使用相同的语法，但不相等：

.right_col {
  height: calc(~"100vh - 400px");
}

在我的实验中，我发现符号“~”在 React.js 组件中不起作用。