Fonction calc() CSS

Définition et utilisation

CSS calc() L'exécution de la fonction calcule et utilise le résultat comme valeur de l'attribut.

Exemple

Utiliser calc() Calculer la largeur de l'élément <div> :

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

Essayez-le vous-même

Syntaxe CSS

calc(expression)
Valeur Description
expression

Obligatoire. Une expression mathématique dont le résultat sera utilisé comme valeur.

Il est possible d'utiliser les opérateurs suivants : +, -, *, /.

Détails techniques

Version : CSS3

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
26 9 16 7 15

Page(s) associée(s)

Référence :Fonction acos() CSS

Référence :Fonction asin() CSS

Référence :Fonction atan() CSS

Référence :Fonction atan2() CSS

Référence :Fonction cos() CSS

Référence :Fonction exp() CSS

Référence :Fonction hypot() CSS

Référence :Fonction log() CSS

Référence :Fonction mod() CSS

Référence :Fonction pow() CSS

Référence :Fonction sin() de CSS

Référence :Fonction sqrt() de CSS

Référence :Fonction tan() de CSS