Lädt...

CSS Calc und Mathematikfunktionen

Custom Properties haben Namen für Werte geliefert. Mathematikfunktionen rechnen diese Werte (und normale Längen) beim Rendern: Sidebar von 100% abziehen, Spalten mit min() begrenzen, Schrift mit clamp() weich skalieren — ohne Sass-Build.

`calc()` — Rechnen im Eigenschaftswert

Ausdruck in calc(...). Bei Plus und Minus Leerzeichen um den Operator:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

%, rem, px, vw und var() mischen, wenn das Ergebnis für die Eigenschaft gültig ist.

Abstände und Einheitenregeln

Ungültig: calc(100%-2rem). Gültig: calc(100% - 2rem). Bei * muss ein Faktor eine Zahl sein.

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

calc() läuft zur Computed-Value-Zeit — passt zum Variablen-Lektion.

`min()` und `max()`

min() wählt das Kleinste, max() das Größte aus einer kommagetrennten Liste:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — gebundene fluide Werte

Reihenfolge: Minimum, bevorzugt, Maximum.

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

Welche Funktion wann?

📊 Mathematikfunktionen im Überblick

Funktion	Idee	Typischer Einsatz
calc()	Formel für eine Eigenschaft	Gutter abziehen, Token verdoppeln
min()	«Nicht größer als…»	Breitenobergrenze
max()	«Mindestens so groß…»	Mindestgröße
clamp()	min + preferred + max	fluide Schriftgröße

Einfaches Seitenhöhen-Muster

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

Selbst ausprobieren

Zwei Spalten mit calc auf main.
Starre font-size durch clamp ersetzen.
min(100%, 40rem) testen.
Formel als --content-w auf :root.
calc(100%-1rem) mit Leerzeichen reparieren.

Typische Fehler

Keine Leerzeichen in calc(100%-2rem)
clamp mit min > max
max() statt Decke (min())
calc im Eigenschaftsnamen
Division zweier Längen

Zusammenfassung

calc() — Leerzeichen um + / -
min() / max() — Extrem aus Liste
clamp() — fluide Typo mit Grenzen
Mit var(--tokens) kombinieren
Weiter mit CSS-Nesting

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache