CSS/Funktionen/calc()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

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.