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

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.


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


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)


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