Css3 calc minus vh with pixel

Question

.wrap {
    height: calc(100vh - 50px);
}

this won't work. I got output of 50vh. Is there any where I can minus pixel with vh?

Working fine for me on Chrome/Win https://jsfiddle.net/azizn/qozoe4d6/ — Aziz, Mar 02 '17 at 06:54
Which browser you are using? Check for `calc()` browser support. — Mohammad Usman, Mar 02 '17 at 06:55
Not actually the case here, but in case someone has problems with this as I did: calc requires spaces left and right of the + and - operator. — Michael Villani, May 05 '20 at 06:33

score 64 · Answer 1 · answered Mar 02 '17 at 12:51

64

Less:

.wrap {
    height: calc(~"100vh - 50px");
}

Sass or pure css:

.wrap {
    height: calc(100vh - 50px);
}

answered Mar 02 '17 at 12:51

3rdthemagical

11

What's the point in posting a duplicate answer despite my comment being there already? I know you've included a Sass version but OP has indicated an *error* which only happens if you write it that way with Less. Also, your Sass/pure CSS version is already there in the question itself. – Harry Mar 02 '17 at 13:27
6

It was actually very helpful for me and I'm so glad he posted it. – tsnakejake Aug 05 '20 at 07:02
1

Thanks for posting it as the answer. Comments are discussions and might not help all the time. @Harry, this is helping the community, your comment isn't! – Bharath Dec 27 '20 at 04:38
1

> calc requires spaces left and right of the + and - operator. – Alex78191 Oct 21 '21 at 19:09

1 Answers1