CSS/Funktionen/calc()

Die calc()-Funktion ermöglicht es Berechnungen durchzuführen, deren Ergebnis dann als CSS-Wert einer Eigenschaft zugewiesen wird.

Parameter	Einziger Parameter ist eine mathematische Berechnung. Erlaubt sind die Operatoren Plus (+), Minus (-), Mal (*), Geteilt (/) sowie runde Klammern.
anwendbar auf	alle Längenangaben, Prozentwerte, Winkelmaße, Zeitangaben <frequency>, <number>, or <integer> kann überall dort verwendet werden, wo eine Eigenschaft ein Maß erwartet
Browsersupport	caniuse: calc

Beispiel

min-height: calc(100px + 5em);

width: calc(100% - 2 * 3px); width: calc(100% / 3);

min-width: calc((80% + 4px) / 2 ) );

 

Beachten Sie: Die Berechnungen, die diese Funktion durchführen kann, unterliegen drei Beschränkungen:

• Addition und Subtraktion sind nur zwischen zwei Maßen möglich,
• die Multiplikation ist nur zwischen einem Maß und einer Zahl möglich,
• Division ist nur möglich, wenn ein Maß durch eine Zahl geteilt wird.

Erfolgt eine Division durch null oder ergibt die Berechnung ein Maß, das die Eigenschaft nicht erlaubt (beispielsweise negative Maße für width), so wird die Eigenschaft ignoriert.

Plus- und Minuszeichen müssen von Leerzeichen umschlossen werden.

Weblinks

• W3C: Mathematical Expressions: calc()
• MDN: calc()

Siehe auch

Beachten Sie: Die Browser rechnen intern mit Integer-Werten anstatt „echten“ Pixeln (, die es im Gewirr zwischen physikalischen und logischen Pixeln gar nicht gibt). Deshalb kann es zu geringfügigen Rundungsfehlern kommen.

• Self-Forum: calc() rechnet falsch? vom 26.09.2017
• Programmiertechnik/Rechnerarithmetik