Is it possible to use vh minus pixels in a CSS calc()?
CssLessCss 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