Funktion calc

Die Funktion calc ermöglicht die Berechnung von Werten für CSS-Eigenschaften. Die Funktion nimmt als Parameter einen mathematischen Ausdruck entgegen, dessen Berechnungsergebnis als Wert für eine CSS-Eigenschaft verwendet werden kann. Der Ausdruck kann die Operatoren +, -, *, / enthalten.

Syntax

cssSelektor {
  Eigenschaft: calc(Ausdruck);
}

Beispiel

Lassen Sie uns den Block so gestalten, dass seine Breite 100% der Breite des Elternelements abzüglich 50px entspricht:

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;
}

Результат:

Siehe auch