CSS calc() Function
calc() function allows you to use calculations within your CSS property values.
calc() function can be used in place of other unit types when setting widths, heights, angles, frequencies, etc. The actual value that the browser uses will be a result of the calcuation performed by the
Here's an example of how the
calc() function can be used:
In this example, the navbar is a fixed width while the article takes up the rest of the space — and resizes as you resize your browser.
We give the
article element a width of
calc(100% - 100px). This calculates into 100 percent of the width, minus
100px (which is the width we gave the
nav element). This is because the
- (minus operator) subtracts the value on the right from the value on the left.
This ensures that the
article element will always take up the remaining width while remaining flush against the
nav element. The two elements can now co-exist side by side without any unwanted gaps in between. You can resize the browser as you wish and they will remain flush against each other. The the navbar will remain its fixed width, while the article will resize accordingly.
calc(), this would be very tricky, if not impossible, to implement with CSS alone.
Try changing the above example from
calc(100% - 100px) to a percentage value (say
75% or whatever works well) then resize your browser and you'll see what I mean. You'll need to keep updating the percentage value as you resize the browser.
Here's another example.
This example's similar to the previous one, but this time, both containers use percentages for their widths. This is normally a trivial thing. However, the reason we use
calc() in this example is that the navbar's margin uses a different unit (
em). So we use the
calc() function to deduct the margin width from the article to ensure that the margin doesn't impact on the two containers.
So let's step through the code. The right container has a width of
calc(80% - 1em). This calculates into
1em. The left container has a right margin of
1em and that's why we subtract
1em from the width of the right container. If we didn't subtract the margin, there wouldn't be enough room for both boxes, and the nav be forced down below the article and its margin.
You can test this by changing
calc(80% - 1em) to just
80% and clicking the Run button.
You can use
calc() to position a background image based on the bottom or right side of the container.
Click Preview to open this example in a new window and you'll see that the background image remains at the bottom right, regardless of the size of the viewport.
In this case we use
calc() because the
background-position property only allows us to set the position from the top, left of the container. It doesn't allow us to specify an amount from the bottom, right of the container. However, using
calc(), the bottom and right edges can be found by using
100%. So it's a simple matter of deducting the desired amount from that figure.
Where else can
calc() be used?
calc() can also be handy with grids or anything where you need to divide a container into many smaller areas — particularly when using mixed units across various elements and/or properties. It can also be good for calculating widths based on font size and things like that.
calc() function lets you perform mathematical expressions using the addition (
+), subtraction (
-), multiplication (
*), and division (
The official syntax of the
calc() function is as follows:
<calc()> = calc( <calc-sum> ) <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
Also, the addition (
+) and subtraction (
-) operators must have white space on both sides. There's no such restriction for the multiplication (
*), and division (
See the official specification link below for more information on the syntax.
calc()function is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)
The following table provided by Caniuse.com shows the level of browser support for this feature.