Question

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

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

 46  226521  46
1 Jan 1970

Solution

 65

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.

2018-10-23

Solution

 37

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

2018-10-23