CODEWITHSUNDEEP
htmlcssuser-interfacecross-browser
Adriano
Adriano

Reputation: 3934

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

Upvotes: 47

Views: 243776

Answers (6)

Laxmi Kanta Dahal
Laxmi Kanta Dahal

Reputation: 151

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.

Upvotes: 15

Maulik Pipaliya Joyy
Maulik Pipaliya Joyy

Reputation: 344

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)

Upvotes: 6

Anukul Limpanasil
Anukul Limpanasil

Reputation: 790

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.

Upvotes: 67

DPS
DPS

Reputation: 1003

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

Upvotes: 2

Dragomir Dan
Dragomir Dan

Reputation: 41

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

Upvotes: 4

jameslittle230
jameslittle230

Reputation: 3108

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

Upvotes: 37

Related Questions