是否可以在 CSS calc() 中使用 vh 减去像素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27256849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:48:25  来源:igfitidea点击:

Is it possible to use vh minus pixels in a CSS calc()?

cssless

提问by Alexander Kim

I have following CSS rule in a Less file:

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

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

Which doesn't work at all. I want to make container full window height and minus header, footer fixed height.

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

How can I do that?

我怎样才能做到这一点?

回答by Alexander Kim

It does work indeed. Issue was with my less compiler. It was compiled in to:

它确实有效。问题在于我的编译器较少。它被编译成:

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

Fixed with the following code in less file:

使用较少文件中的以下代码修复:

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

Thanks to this link: Less Aggressive Compilation with CSS3 calc

感谢此链接:使用 CSS3 calc 进行较不激进的编译