calc() ist eine Funktion, die in CSS rechnet und dabei Einheiten mischen darf. Genau das macht sie so nützlich.
- calc()
Funktion, die einen Wert aus einer Rechnung ermittelt und dabei verschiedene Einheiten verbinden darf.
Beispiel: „Ein calc darf Prozentangaben und feste Längen mischen.“
Wofür es gebraucht wird
width: calc(100% - 3rem);
min-height: calc(100vh - var(--hoehe-header));Immer dann, wenn ein Wert von etwas abhängt, das erst im Browser feststeht: die volle Breite minus einem festen Abstand, die Fensterhöhe minus der Kopfzeile. Zusammen mit CSS-Variablen wird es zum Rechenwerkzeug für ganze Layouts.
Die Leerzeichen
Um Plus und Minus müssen Leerzeichen stehen, sonst wird der Ausdruck nicht gelesen. Der Grund ist, dass ein Minus auch zu einem Wert gehören könnte. Bei Mal und Geteilt ist es nicht nötig, der Gleichmäßigkeit halber schreibt man es trotzdem.