是否可以在 CSS calc() 中使用 vh 减去像素？ [复制]

【问题标题】：Is it possible to use vh minus pixels in a CSS calc()? [duplicate]是否可以在 CSS calc() 中使用 vh 减去像素？ [复制]
【发布时间】：2015-01-31 03:18:58
【问题描述】：

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

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

这根本不起作用。我想让容器全窗口高度和减去页眉、页脚固定高度。

我该怎么做？

【问题讨论】：

似乎工作 - jsfiddle.net/gz4zp1ua/2
确保相关浏览器确实支持您的要求：caniuse.com/#feat=calc 和 caniuse.com/#feat=viewport-units。
我已将其作为一个骗子关闭，因为该线程包含有关更新选项的详细信息，这也可能对其他人有用（除此之外，该问题还具有更高的视图和投票数）。
如果你使用较少的变量，你可以使用这样的东西：calc(~"100vh" - (@first-header-height + @second-标题高度));

标签： css less

【解决方案1】：

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

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

在less文件中修复了以下代码：

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

感谢此链接：Less Aggressive Compilation with CSS3 calc

【讨论】：

被这个咬了。如果您需要在字符串中使用变量，您可以这样做：calc(~"100vh - @{navbar-height}")
完美的把戏，谢谢你！想知道为什么它在 .css 中有效，但在 .less 中无效
这似乎也适用于 calc(~"100vh - "@bar-height) 使用 LESS
哎呀，为什么没有人指出我们需要在- 的两边都有空格，现在它可以工作了
@mkb 谢谢，Chromium 告诉我的财产因缺少空格而无效。