41

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

2

6 Answers 6

58

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.

0
37

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

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.

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)

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

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

2
  • So are you saying this was a case of negligence removing the "- 80px" but not the entire calc() expression?
    – BoltClock
    Oct 23, 2018 at 5:07
  • I concur with @"Dragomir Dan"
    – Russell
    Jul 27, 2020 at 16:22
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.