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

CssLess

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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: https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlexander KimView Question on Stackoverflow
Solution 1 - CssAlexander KimView Answer on Stackoverflow