CSS calc() Function
Example
Use the calc() function to calculate the width of a <div> element:
Try it Yourself »
Definition and usage
The calc() function is used to dynamically calculate length values.
- Note that a space must be preserved before and after the operator, for example:
width: calc(100% - 10px)； - Any length value can be calculated using the calc() function;
- calc() function supports "+", "-", "*", "/" operations;
- The calc() function uses standard mathematical operator precedence rules;
Supported versions: CSS3
Browser Support
The numbers in the table indicate the first browser version number that supports the function.
The numbers specified with "webkit", "moz", or "o" are the first version number prefixes that support the function.
| Function | |||||
|---|---|---|---|---|---|
| calc() | 26.0 19.0 -webkit- |
9.0 | 16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
CSS Syntax
calc(expression)
| Value | Description |
|---|---|
| expression | Required, a mathematical expression; the result will use the returned value after evaluation. |
Automatically resize form fields to fit the size of their container.
calc()Another use case is to ensure that the size of a form field fits the currently available space, without being squeezed beyond the edge of its container while maintaining appropriate margins.
In the following example, the form element itself uses 1/6 of the available width of the window; then, to keep the input elements inside the form at an appropriate size, we use calc() again to set their width to the container's width minus 1em. The following...
Example
Try it Yourself »
other extensions