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
sé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 :
<div id="parent">
<div id="child"></div>
</div>
#child {
width: calc(100% - 50px);
height: 100px;
margin: 0 auto;
border: 1px solid red;
}
#parent {
border: 1px solid green;
}
: