what is calc function in css

Question

can anyone please say about the use of cacl() function in css

Answer 1

calc() function is used to calculate between viewports, percentages and pixels.

For example if you have 2 div, first div is 100px height and you want second div to take all remaining place then you have to use calc() function to calculate remaining height.

example :

#div1{
width: 100%;
height: 100px;
background: green;
}

#div2{
width: 100%;
/*100vh is total height of device - 100px which is height taken by div1*/
height: calc(100vh - 100px);
background: red;
}

Answer 2

Actually you can use it whenever you need to calculate something related to different units.

for example :
width: calc (50% - 10px);
Here % and px different units are used. Because you don't know the result when you substrate 10px from 50% (it's not 40%).

Hope it helps.