Ă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.
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.
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