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

Question

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?

Make sure the browser in question actually supports what you're asking for: http://caniuse.com/#feat=calc and http://caniuse.com/#feat=viewport-units. — cimmanon, Dec 02 '14 at 19:43
I had closed this as a dupe because that thread has details about updated options also which could be useful for others (on top of it, that question also has higher views and vote counts). — Harry, Dec 04 '15 at 13:48
If you're using less variables you can use something like this: calc(~"100vh" - (**@first-header-height** + **@second-header-height**)); — Hamid Behnam, Mar 28 '16 at 20:59

score 287 · Accepted Answer · edited May 23 '17 at 12:10

287

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

edited May 23 '17 at 12:10

Community

answered Dec 03 '14 at 05:12

Alexander Kim

30

Bitten by this. In case you need to use variables inside the string, you can do ti like this: `calc(~"100vh - @{navbar-height}")` – Julián Landerreche Apr 22 '16 at 20:23
2

Perfect trick, thanks to you ! Wondered why it works in .css but not in .less – Pierre Mar 24 '17 at 16:03
1

this also seems to work `calc(~"100vh - "@bar-height)` using LESS – Raja Khoury Jun 07 '17 at 18:09
36

ow man why no one pointed out that we need spaces on both sides of `-`, now it works – mkb Sep 08 '19 at 21:12
4

@mkb Thanks, Chromium told be my property was invalid because of missing spaces. – Hans Mar 20 '20 at 13:42
8

In SASS/SCSS it would be: `max-height: calc(100vh - 150px)`. Cheers! – Elharony Jun 28 '20 at 14:06
1

@mkb thanks a lot. In my case chromium is not working with double quotes. I used min-height: calc(100vh - 150px); – Arijit May 05 '22 at 10:03
One can use it with various sizes as well, like: `.container { min-height: calc(100vh - 2em); }` – Bullsized May 10 '22 at 12:38

1 Answers1