English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules

All CSS Properties

CSS calc() Function

The calc() CSS function allows you to perform some calculations when declaring CSS property values. It can be used in the following situations: <length>, <frequency>, <angle>, <time>, <number>, or <integer>.

CSS Function

Online Example

Use the calc() function to calculate the width of the <div> element:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)<//title>　
<style>
#div1　{
　　　　position: absolute;
　　　　left:　50px;
　　　　width: calc(100%　-　100px);
　　　　border:　1px solid black;
　　　　background-color: yellow;
　　　　padding:　5px;
　　　　text-align: center;
}
</style>
</head>
<body>
<p>Create a div spanning the screen, with　50px gap:<//p>
<div id="div1">some text...</div>
</body>
</html>
Test and See ‹/›

Definition and Usage

The calc() function is used for dynamic calculation of length values.

  • It should be noted that there must be a space before and after the operator, for example:width: calc(100% - 10px);

  • Any length value can be calculated using the calc() function;

  • The calc() function supports "+", "-", "*", "/Operation;

  • The calc() function uses standard mathematical operator precedence rules;

Supported Version: CSS3

Browser Compatibility

The numbers in the table represent the first browser version number that supports the function.

"webkit" or "moz" or "o" prefixes the number to indicate the first version of the function supported.

Function




calc()26.0
19.0　-webkit-		9.016.0
4.0　-moz-		7.0
6.0　-webkit-		15.0

CSS Syntax

calc(expression)
ValueDescription
expressionRequired, a mathematical expression, the result of which will be used as the return value after the operation.
The calc() function takes an expression as its parameter and uses the result of the expression as its value. This expression can be a combination of any of the following operators, using simple expressions that follow standard operator precedence rules. Example: width: calc(100% - 80px);

CSS Function

CSS @charset RuleCSS Functions (Functions)