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

css less

Alexander Kim · Dec 2, 2014 · Viewed 156.8k times · Source

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?

Answer

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");
}