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)