Fonction calc

La fonction calc permet d'effectuer des calculs pour les valeurs des propriétés CSS. La fonction prend en paramètre une expression mathématique, dont le résultat peut être utilisé comme valeur d'une propriété CSS. L'expression peut inclure les opérateurs +, -, *, /.

Syntaxe

csssélecteur {
  propriété: calc(expression);
}

Exemple

Faisons en sorte que la largeur d'un bloc soit égale à 100% de la largeur du parent, moins 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;
}

Результат:

Voir aussi