calc()
La fonction calc() perrmet de réaliser des calculs simples pour affecter une valeur à une propriété CSS. Elle accepte les quatre opérateurs de base: +, -, * et / respectivement pour l'addition, la soustraction, la multiplication et la division.
Les signes plus et moins doivent obligatoirement être entourés d'espaces afin de ne pas les confondre avec des valeurs signées.
Pour la multiplication, au moins 1 des arguments doit être un nombre.
Le deuxième argument de la division est obligatoirement un nombre.
Il est possible de mélanger les unités.
Il est également possible d'imbriquer les fonctions calc() entre elles. Cela revient au même que d'utiliser des parenthèses.
Dans l'exemple qui suit, on place deux blocs <div> sur les bords de la fenêtre et on en place un troisième au milieu à 50 pixels d'intervalle des deux autres.
<style>
#bloc1 {
width: 200px;
height: 300px;
border: 1px solid black;
background-color: bisque;
left: 0px;
}
#bloc2 {
position: relative;
width: 200px;
height: 300px;
border: 1px solid black;
background-color: bisque;
left: calc(100% - 200px);
top: -300px;
}
#bloc3 {
position: relative;
width: calc(100% - 500px);
height: 300px;
border: 1px solid black;
background-color: aqua;
box-shadow: 1px 2px;
box-sizing: border-box;
left: 250px;
top: -600px;
}
</style>
<div id="bloc1">
Bloc 1
</div>
<div id="bloc2">
Bloc 2
</div>
<div id="bloc3">
Bloc 3
</div>