Funzione calc

La funzione calc permette di eseguire calcoli sui valori delle proprietà CSS. La funzione accetta come parametro un'espressione matematica, il cui risultato del calcolo può essere utilizzato come valore di una proprietà CSS. L'espressione può includere gli operatori +, -, *, /.

Sintassi

cssselettore {
  proprietà: calc(espressione);
}

Esempio

Facciamo in modo che la larghezza del blocco sia uguale al 100% della larghezza del genitore, meno 50px:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Vedi anche