Ausführbare CSS-Docs: CSS calc()

Q: Was macht calc() in CSS?

Es berechnet einen Wert aus einem Ausdruck mit +, -, * und / und kann Einheiten mischen, die der Browser erst beim Layout kennt. width: calc(100% - 200px) ist die volle Breite des Elternelements minus 200px, egal wie breit das Elternelement ist.

Q: Warum funktioniert mein calc() nicht?

Die häufigste Ursache sind fehlende Leerzeichen: + und - brauchen auf beiden Seiten Leerraum, also ist calc(100%-20px) ungültig. Weitere Ursachen sind das Multiplizieren zweier Längen (10px * 2px) oder das Dividieren durch eine Länge, was keine Länge ergibt. Ein ungültiges calc() macht die ganze Deklaration ungültig, und der Browser ignoriert sie.

Q: Kann ich CSS-Variablen in calc() verwenden?

Ja. calc(var(--gap) 2) verdoppelt eine Variable, und calc(var(--columns) 1px) macht aus einer Zahl ohne Einheit Pixel. Zuerst wird der Wert der Variable eingesetzt, dann wird gerechnet.

Q: Brauche ich in calc() Leerzeichen um * und /?

Nein. Nur + und - brauchen Leerzeichen, weil -20px ohne sie als negative Zahl gelesen würde. Leerzeichen um * und / sind optional, aber sie überall zu schreiben, ist die Regel, die du dir am leichtesten merkst.

Q: Was ist der Unterschied zwischen calc() und clamp()?

calc() berechnet einen Wert aus einem Ausdruck. clamp(MIN, VAL, MAX) hält einen Wert zwischen zwei Grenzen. Beide lassen sich kombinieren: Jedes Argument von clamp() kann schon Rechnungen wie in calc() enthalten, etwa clamp(1rem, 1rem + 2vw, 3rem).

Was calc() macht

calc() rechnet innerhalb eines CSS-Werts und kann Einheiten mischen, die erst beim Layout eine Größe bekommen. Der klassische Fall ist „die volle Breite minus eine feste Seitenleiste“:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

100% steht erst fest, wenn die Seite angeordnet ist, und 180px ist fest, also könnte keine einzelne Einheit das ausdrücken. calc() rechnet es aus: In einer 800px breiten Vorschau ist die Zeile 784px breit, und die Hauptspalte bekommt 604px; die Zeile unter dem Layout gibt die echten Zahlen aus. Heute würden Flexbox oder Grid dieses Layout ohne Rechnen erledigen, aber dieselbe Subtraktion taucht trotzdem überall auf: eine Höhe minus ein Header, eine Breite minus eine Lücke.

Die Syntaxregeln

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

Regel	Gültig	Ungültig
Leerzeichen um `+` und `-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: mindestens eine Seite ist eine reine Zahl	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: eine Länge durch eine reine Zahl teilen	`calc(100% / 3)`	`width: calc(300px / 3px)` (keine Länge)
Einheiten müssen zusammenpassen	`calc(1rem + 10px)`	`calc(1rem + 2s)`

Die Leerzeichenregel gibt es, weil 100% -20px als zwei getrennte Werte gelesen würde, der zweite davon eine negative Zahl. Ist ein calc() ungültig, wird die ganze Deklaration verworfen, und das Element behält den Wert, den es aus früheren Regeln hatte.

Probier einen Ausdruck aus

Tipp einen beliebigen Ausdruck für die Breite der Box ein. Der Browser meldet, ob er gültig ist und welche Breite herauskommt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Probier 100%-200px (ungültig, keine Leerzeichen), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (ungültig) und (100% - 40px) / 2.

calc() mit CSS-Variablen

Variablen und calc() gehören zusammen: Speichere einen Basiswert einmal und leite den Rest davon ab. Eine Variable ohne Einheit wird zu einer Länge, wenn du sie mit einer Einheit multiplizierst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

Ändere --space in 12px oder --cols in 4, und jeder abgeleitete Wert folgt. Die Seite zu CSS Variablen behandelt Deklaration und Geltungsbereich.

Typische Einsätze

Bedarf	calc()
Den Platz neben einem festen Element füllen	`width: calc(100% - 240px)`
Abschnitt unter einem fixierten Header	`min-height: calc(100vh - 64px)`
Halbe Breite minus halbe Lücke	`width: calc(50% - 8px)`
Eine absolut positionierte 100px-Box zentrieren	`left: calc(50% - 50px)`
Schriftgröße, die etwas mit dem Bildschirm wächst	`font-size: calc(1rem + 0.5vw)`
Eine Zahlenvariable in eine Länge umwandeln	`calc(var(--n) * 1px)`
Negativer Wert einer Variable	`calc(var(--space) * -1)`

Für einen Wert, der zwischen Grenzen bleiben muss, nimm clamp(), das dieselben Rechnungen in seinen Argumenten ohne calc() akzeptiert.

Wo calc() funktioniert

Überall, wo eine Länge, ein Prozentwert, eine Zahl, ein Winkel oder eine Zeit erlaubt ist: width, margin, padding, top, font-size, line-height, Spurgrößen im Grid, transition-delay und Winkel in transform. Es lässt sich verschachteln, und ein verschachteltes calc() ist dasselbe wie einfache Klammern.

Winkel sind ein gutes Beispiel. Jeder Strich unten hat sein eigenes --i (0 bis 11), und eine einzige Regel macht daraus mit calc(var(--i) * 30deg) einen Winkel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

Strich 3 bekommt rotate(90deg), was Chrome als Matrix matrix(0, 1, -1, 0, 0, 0) meldet: eine Vierteldrehung. left: calc(50% - 2px) zentriert jeden Strich, indem es die Hälfte seiner eigenen Breite von 4px abzieht.

Häufige Fehler

Keine Leerzeichen um - oder +. calc(100%-20px) ist ungültig und wird ignoriert.
Zwei Längen multiplizieren. calc(10px * 2px) hat in CSS keine Bedeutung. Eine Seite von * muss eine reine Zahl sein.
calc() für eine Prozenthöhe ohne Höhe am Elternelement. calc(100% - 20px) für height braucht ein Elternelement mit festgelegter Höhe, genau wie height: 100%.
calc() nutzen, wo Flexbox oder Grid reichen würden. width: calc(33.333% - 10px) für Spalten ist fragil; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px braucht keine Rechnung.
Eine Fehlermeldung erwarten. Der Browser warnt nicht vor einem ungültigen calc(). Prüf das Element in den Entwicklertools: Eine ungültige Deklaration wird durchgestrichen angezeigt.

Häufig gestellte Fragen

Was macht calc() in CSS?

Es berechnet einen Wert aus einem Ausdruck mit +, -, * und / und kann Einheiten mischen, die der Browser erst beim Layout kennt. width: calc(100% - 200px) ist die volle Breite des Elternelements minus 200px, egal wie breit das Elternelement ist.

Warum funktioniert mein calc() nicht?

Die häufigste Ursache sind fehlende Leerzeichen: + und - brauchen auf beiden Seiten Leerraum, also ist calc(100%-20px) ungültig. Weitere Ursachen sind das Multiplizieren zweier Längen (10px * 2px) oder das Dividieren durch eine Länge, was keine Länge ergibt. Ein ungültiges calc() macht die ganze Deklaration ungültig, und der Browser ignoriert sie.

Kann ich CSS-Variablen in calc() verwenden?

Ja. calc(var(--gap) * 2) verdoppelt eine Variable, und calc(var(--columns) * 1px) macht aus einer Zahl ohne Einheit Pixel. Zuerst wird der Wert der Variable eingesetzt, dann wird gerechnet.

Brauche ich in calc() Leerzeichen um * und /?

Nein. Nur + und - brauchen Leerzeichen, weil -20px ohne sie als negative Zahl gelesen würde. Leerzeichen um * und / sind optional, aber sie überall zu schreiben, ist die Regel, die du dir am leichtesten merkst.

Was ist der Unterschied zwischen calc() und clamp()?

calc() berechnet einen Wert aus einem Ausdruck. clamp(MIN, VAL, MAX) hält einen Wert zwischen zwei Grenzen. Beide lassen sich kombinieren: Jedes Argument von clamp() kann schon Rechnungen wie in calc() enthalten, etwa clamp(1rem, 1rem + 2vw, 3rem).

Verwandte Konzepte