在CSS calc()中可以使用vh减去像素吗？

Question

我在一个Less文件中有以下CSS规则：

.container {
  min-height: calc(100vh - 150px);
}

这根本不起作用。我想让容器占据整个窗口高度，并减去头部和底部固定高度。

我该怎么做？

- Alexander Kim

---

似乎可以工作 - http://jsfiddle.net/gz4zp1ua/2/ - Paulie_D

确保所使用的浏览器实际上支持你所要求的功能：http://caniuse.com/#feat=calc 和 http://caniuse.com/#feat=viewport-units。 - cimmanon

我将其关闭为重复问题，因为那个帖子还涉及到一些更新选项的详细信息，这对于其他人也可能很有用（而且那个问题也有更高的浏览量和赞数）。 - Harry

如果您正在使用较少的变量，可以使用类似以下的代码： calc(~"100vh" - (@first-header-height + @second-header-height)); - Hamid Behnam

Answer 1

确实有效。问题在于我的less编译器。它被编译成了：

.container {
  min-height: calc(-51vh);
}

通过以下 less 代码进行修复：

.container {
  min-height: calc(~"100vh - 150px");
}

感谢这个链接：Less Aggressive Compilation with CSS3 calc

- Alexander Kim

---

被这个咬了。如果你需要在字符串内使用变量，可以像这样做：calc(~"100vh - @{navbar-height}")。 - Julián Landerreche

完美的技巧，感谢你！不知道为什么它在.css中有效但在.less中无效。 - Pierre

噢，为什么没有人指出我们需要在“-”两侧加上空格，现在它可以正常工作了。 - mkb

谢谢，Chromium 告诉我我的属性无效，因为缺少空格。 - Hans

在 SASS/SCSS 中，它应该是这样的：max-height: calc(100vh - 150px)。干杯！ - Elharony