De calc-functie

De functie calc maakt het mogelijk om berekeningen uit te voeren voor CSS-eigenschapwaarden. De functie accepteert een wiskundige expressie als parameter, en het resultaat van de berekening kan worden gebruikt als waarde voor een CSS-eigenschap. De expressie kan de operatoren +, -, *, / bevatten.

Syntaxis

cssselector {
  eigenschap: calc(expressie);
}

Voorbeeld

Laten we een blok maken waarvan de breedte gelijk is aan 100% van de breedte van de ouder, min 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;
}

Результат:

Zie ook