Chrome中使用calc计算的"vw" CSS单位无法正常工作

Question

新的CSS单位vw（以及vh，vmin和vmax）非常有用，calc也是如此。在Chrome浏览器中，两者都可以正常工作（后者需要添加前缀-webkit-calc），但由于某些原因我发现包括v*单位的calc属性值（例如width：-webkit-calc（95vw-25em））会产生无效的属性值。这是尚未实现的问题，还是规范或错误？

- user663031

---

规范允许在 calc 中使用 vw，甚至在其中的一个示例中使用了它：http://www.w3.org/TR/css3-values/#calc - Jukka K. Korpela

这是Chrome的一个漏洞，但现在已经修复了。 - Stephan Muller

Answer 1

这是一个错误，记录为 Bug 94158 - calc与视口单位不兼容。

- Jukka K. Korpela

---

这个 bug 修复了吗？我必须使用它或者另一种替代方案，但是我找不到其他的解决方法... - Thomas Ayoub

@Samoth 据我所知没有。在Chrome 31.0.1650.57 m中，我刚遇到了这个问题。 - Blieque

正确，这个 Chrome 的 bug 仍然存在，目前还没有得到解决。 - runspired

看起来这个问题已经被悄悄修复了 - 至少在开发通道中对我来说似乎是有效的。 - Tom Carrick

这仍然是个问题吗？为什么 height: calc(10000vw / 25vh) 返回零高度？ - oldboy

Answer 2

这是一个旧的错误，已经被修复了很久，但如果你仍然支持旧版本的Chrome，并且在你支持的Android平板电脑中遇到了这个错误（就像我的情况一样），那么你可以通过以下简单的方法解决这个问题:

使用一个包装器来覆盖你要定位的VW，然后在计算（calc(...)）中不要使用视口单位，而是使用100%。

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);
}

- kevin

---

根据当前的w3schools教程，应该是XXXXXpx。 - Mike O'Connor