CSS `height: calc(100vh);` Vs `height: 100vh;`

Question

I'm working on a project where the former developer used:

.main-sidebar {
    height: calc(100vh);
}

I have no way to contact him/her anymore, and I would like to understand what is the difference (if any) between the two methods.

(Is this the right place to ask this question?)

Possible duplicate of [Unnecessary use of calc() in MDN example?](https://stackoverflow.com/questions/47888375/unnecessary-use-of-calc-in-mdn-example) (this isn't an MDN example but it features the same use of calc() with only one value) — BoltClock, Oct 23 '18 at 04:50
"(Is this the right place to ask this question?)" Yes, don't worry. — BoltClock, Oct 23 '18 at 04:51

score 57 · Answer 1 · edited Sep 03 '19 at 23:34

VH
height: 100vh; means the height of this element is equal to 100% of the viewport height.

example: height: 50vh;
If your screen height is 1000px, your element height will be equal to 500px (50% of 1000px).

CALC
height: calc(100% - 100px); will calculate the size of the element by using the value of the element.

example:
height: calc(100% - 100px); If your screen height is 1000px, your element height will be equal to 900px (100% of 1000px and minus 100px).

*I think your former developer didn't need to use calc() if he/she didn't want to calculate value.

score 36 · Accepted Answer · answered Oct 23 '18 at 04:50

36

There's no difference, since any time the expression calc(100vh) is calculated, it always ends up being 100vh.

answered Oct 23 '18 at 04:50

jameslittle230

3,098
1
14
7

score 9 · Answer 3 · edited Jan 19 '22 at 10:40

9

calc() is just used to calculate the value inside the parenthesis.

Example height: calc(100vh - 60px);

Here the height will be lesser by 60px in viewport height.

Note: Remember to use space before the operator and after the operator if its not working.

edited Jan 19 '22 at 10:40

Elikill58

4,050
24
23
45

answered Jan 19 '22 at 06:24

Laxmi Kanta Dahal

91
1
2

score 8 · Answer 4 · edited May 16 '20 at 05:05

8

The calc() CSS function lets you perform calculations when specifying CSS property values

you may want to refer this Path

(The reason former developer used this may be that he's conventionally using it everywhere and it'd be easier to add calculations afterwards)

edited May 16 '20 at 05:05

Kondal

2,870
5
26
40

answered Oct 23 '18 at 05:41

Maulik Pipaliya Joyy

326
4
13

3

I bet the original value was something like calc(100vh - 60px), then later removed -60px – Russell Jul 27 '20 at 16:20
I totally agree, Russell. Most probably that should have been the case! :p – Maulik Pipaliya Joyy Jul 31 '20 at 03:11
1+ for providing a link to an example that makes things very clear. – Jakob Nov 16 '21 at 12:47

score 3 · Answer 5 · answered Oct 23 '18 at 04:54

3

A common use case is that at first he substracted the header or any other element. calc(100vh - 80px).

answered Oct 23 '18 at 04:54

Dragomir Dan

31
1

So are you saying this was a case of negligence removing the "- 80px" but not the entire calc() expression? – BoltClock Oct 23 '18 at 05:07
I concur with @"Dragomir Dan" – Russell Jul 27 '20 at 16:22

score 3 · Answer 6 · answered Oct 23 '18 at 05:31

Basically calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

Now in your case, both are same as you have not used any calculation. So you can use height: 100vh

CSS `height: calc(100vh);` Vs `height: 100vh;`

6 Answers6