是否可以在CSS calc()中使用vh减去像素? [英] Is it possible to use vh minus pixels in a CSS calc()?

问题描述

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

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

根本不起作用.我想使容器的整个窗口高度和减去页眉，页脚固定的高度.

我该怎么做?

解决方案

它确实有效.问题出在我的编译器较少.它被编译为:

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

在更少的文件中固定以下代码:

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

感谢此链接:使用CSS3 calc减少积极的编译

I have following CSS rule in a Less file:

.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?

解决方案

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

这篇关于是否可以在CSS calc()中使用vh减去像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！