"vw"Chrome中的计算单元格无效

Question

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

Answer 1

这是一个错误,注册为错误94158 - calc不适用于视口单元.

Answer 2

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

使用跨越您所针对的 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);
}