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?)

Answer 1

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.

Answer 2

没有区别，因为无论calc(100vh)计算表达式calc(100vh) ，它总是以100vh结束。

Answer 3

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)

Answer 4

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

Answer 5

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

Answer 6

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.