Working with CSS- calc()

These days CSS has the ability to do some cool stuff like animations, gradients, transforms,
creating sophisticated interfaces with flexible box layouts etc.

In this blog we will learn how to use the calc() CSS function, which is very useful for calculation in CSS.

How to use it:

calc() allow us to use the mathematical formula within CSS with height, width and font-sizes etc. To measure we can use four maths operators add(+), subtract(-), multiply(*) and divide(/).

Syntax:

[css]

width:calc(100% / 4);

[/css]

Uses of calc() function:

Suppose there is content <div> which is supposed to adjust height according to the height of the browser. Here is the tricky part of the problem wherein the content should be just below the header. We usually achieve it via plain old vanilla JavaScript or jQuery. But this can easily be achieved by using CSS calc() function.

[css]

.content{
height:90%; /*fallback*/
height:calc(100% – 40px);
}

[/css]

Browser support:

It is supported by almost all modern browsers. On desktop version it supports IE 9+, Safari 6+.
For reference you can use the following link:
http://caniuse.com/#search=calc%28%29

For browsers that don’t support calc(),  use the following polyfill:
https://github.com/closingtag/calc-polyfill