Rechnen mit gemischten Einheiten
Mit calc() rechnet der Browser Werte in unterschiedlichen Einheiten zusammen, etwa 100% minus 280px für eine Inhaltsspalte neben einer festen Seitenleiste. Der Generator lässt Sie den Ausdruck aus Termen zusammenstellen: Jeder Term besteht aus einer Zahl und einer Einheit (px, rem, em, %, vw, vh, vmin, vmax oder ch), dazwischen stehen die Operatoren +, -, * oder /.
Viele calc()-Fehler sind Syntaxfehler, bei denen der Browser die ganze Deklaration stillschweigend ignoriert. Der Generator prüft deshalb die Regeln: Um + und - müssen Leerzeichen stehen, sonst wird -20px als negative Zahl gelesen. Bei * muss mindestens eine Seite eine einheitenlose Zahl sein, bei / muss der Divisor eine einheitenlose Zahl sein. 2 * 10px ist gültig, 10px * 10px nicht.
Damit Sie wissen, was herauskommt, legen Sie einen Kontext fest: Breite des Elternelements, Viewport-Größe, Root- und Element-Schriftgröße. Dazu wählen Sie die CSS-Eigenschaft, etwa width, height, margin, padding, font-size oder top, denn davon hängt ab, worauf sich Prozentwerte beziehen. Der Generator zeigt das Ergebnis in Pixeln. Vorlagen für volle Breite minus Seitenleiste, zentrierte Spalte, volle Höhe minus Header und fluiden Innenabstand helfen beim Einstieg. calc() lässt sich auch mit benutzerdefinierten Eigenschaften kombinieren, etwa calc(var(--abstand) * 2), und Ausdrücke können verschachtelt werden. Der Browser berechnet calc() bei jeder Layoutänderung neu: Ändert sich die Fenstergröße oder die Breite des Elternelements, passt sich das Ergebnis automatisch an. Genau deshalb ist calc() oft die einfachere Alternative zu JavaScript, wenn Größen von mehreren Faktoren abhängen.
Der Generator läuft in Ihrem Browser und ist kostenlos ohne Begrenzung nutzbar: Vorschau, Berechnung und Kopieren des CSS stehen ohne Pro zur Verfügung.
So erstellen Sie einen calc()-Ausdruck
- Mit einer Vorlage beginnen oder Terme mit Wert und Einheit hinzufügen.
- Operatoren + - * / zwischen den Termen wählen.
- Die CSS-Eigenschaft und den Kontext festlegen (Elternbreite, Viewport, Schriftgrößen).
- Validierung und berechnetes Ergebnis in Pixeln prüfen.
- Den calc()-Ausdruck kopieren.
Typische Einsatzzwecke
- Inhaltsbereich mit 100% minus Seitenleistenbreite.
- Bereich mit voller Höhe abzüglich Header: calc(100vh - 64px).
- Zentrierte Spalten mit festem Abstand zum Rand.
- Fluide Innenabstände aus rem und vw.
- Positionierung mit top oder left relativ zum Elternelement plus festem Versatz.
- Fehlerhafte calc()-Ausdrücke aus bestehendem CSS prüfen.
Die Regeln von calc()
- Richtig: calc(100% - 2rem). Falsch: calc(100%-2rem), weil die Leerzeichen um - fehlen.
- Bei * und / brauchen Leerzeichen nicht, sind aber für die Lesbarkeit empfehlenswert.
- Multiplikation: calc(3 * 1rem) ist gültig, calc(2rem * 1rem) nicht.
- Division: calc(100% / 3) ist gültig, calc(100px / 2px) nicht.
- Prozent bezieht sich je nach Eigenschaft auf etwas anderes: bei width und margin auf die Breite des Elternelements, bei height auf dessen Höhe, bei font-size auf die Schriftgröße des Elternelements.
Häufig gestellte Fragen
Ist der Calc Generator kostenlos?
Ja, ohne Begrenzung. Vorschau, Berechnung und Kopieren des CSS sind frei, Pro ist dafür nicht nötig.
Warum funktioniert mein calc() nicht?
Meist fehlen Leerzeichen um + oder -, oder bei * und / ist keine Seite eine einheitenlose Zahl. Der Generator prüft genau diese Regeln.
Kann ich Prozent und Pixel mischen?
Ja, genau dafür ist calc() gemacht, etwa calc(100% - 300px).
Worauf beziehen sich Prozentwerte?
Das hängt von der Eigenschaft ab. Deshalb wählen Sie im Generator die Eigenschaft und den Kontext, um das richtige Ergebnis zu sehen.
Was ist der Unterschied zu clamp()?
calc() rechnet einen Wert aus, clamp() begrenzt einen Wert zusätzlich nach unten und oben. Für fluide Größen mit Grenzen eignet sich der Clamp Generator.