calc function

suggest change

Accepts a mathematical expression and returns a numerical value.

It is especially useful when working with different types of units (e.g. subtracting a px value from a percentage) to calculate the value of an attribute.

\+, \-, /, and \* operators can all be used, and parentheses can be added to specify the order of operations if necessary.

Use calc() to calculate the width of a div element:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 

Use calc() to determine the position of a background-image:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Use calc() to determine the height of an element:

height: calc(100% - 20px);

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents