calc

Übersicht

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

calc() kann überall verwendet werden, wo <length>, <frequency>, <angle>, <time>, <number> und <integer> eingesetzt werden dürfen.

Syntax

calc( <calc-sum> )
wobei 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
wobei 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
wobei 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
/* Eigenschaft: calc(Ausdruck) */
width: calc(100% - 80px);

Werte

Ausdruck
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.

Ausdrücke

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+
Addition.
-
Subtraktion.
*
Multiplikation (muss mindestens eine <number> enthalten).
/
Division (Divisor muss eine <number> sein).

Bei den Operanden darf es sich um jeden Wert vom Typ <length> handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
Das Setzen von Klammern ist ebenfalls möglich.

calc()-Funktionen können ineinander verschachtelt werden.

Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.

Beispiele

Relative Größe eines Objekts mit einer absoluten Positionierung

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

.banner {
  position: absolute;
  left: 40px;
  width: 90%;               /* fallback for browsers without support for calc() */
  width: calc(100% - 80px);
}

<div class="banner">This is a banner!</div>

Spezifikation

Spezifikation Status Anmerkung
CSS Values and Units Module Level 3
Die Definition von 'calc()' in dieser Spezifikation.		 Anwärter Empfehlung

Browserkompatibilität

BCD tables only load in the browser

Siehe auch