css - Chrome 中 calc 中的“vw”CSS 单元不起作用

Question

新的vw（和vh，vmin和vmax）CSS 单元非常有用，就像calc. 两者在 Chrome 中都可以正常工作（后者前缀为-webkit-calc），但由于某种原因，我发现calc包括v*单位在内的属性值，例如width: -webkit-calc(95vw - 25em)产生无效的属性值。这只是尚未实现，还是规范或错误？

Answer 1

这是一个错误，注册为错误 94158 - calc is not working with viewport units。

Answer 2

这是一个老错误，早就被修复了，但如果你仍然支持旧版本的 chrome，特别是在你支持的 Android 平板电脑中的旧版本 chromium 中遇到这个错误（就像我的情况一样），这里是解决此错误的简单方法：

使用跨越您目标的 VW 的包装器，然后使用 100% 代替使用 calc(...) 中的视口单位。

html:

<div class="container">
    <div class="inner-calc-with-viewport-units-bugged" />
</div>

CSS：

.container { 
    width: 100vw; //or height: 100vh, depending on your usecase
}
.inner-calc-with-viewport-units-bugged { 
    width: calc(100% - XXXXX px); //or height: calc(100% - XXpx);
}