Größen berechnen mit CSS calc()-Funktion

Die Funktion calc() ermöglicht die Berechnung von Eigenschaften, die mit CSS bislang schlicht unmöglich waren. Dafür wurden bis dato Pre-Prozessoren wie Less oder Sass benötigt oder mussten mit Hilfe von JS »gefrickelt« werden. Die Funktion wird zwischenzeitlich von allen gängigen Browsern unterstützt und wird auch schon häufig genutzt.

Gemische Einheiten

Bei der Addition und Subtraktion müssen Einheiten angegeben werden, die können jedoch gemischt sein. Zwischen den Werten und dem Operator muss immer ein Leerzeichen eingefügt werden.

.element {
  width: calc(100% - 30px);
  height: calc(100vh - 30px);
}

Verschachtelte Berechnung

Bei der Multiplikation oder Division darf nur einer der beide Werte eine Einheit besitzen.

.element {
  width: calc((100% / 4) - (10px * 4));
}

Kombination mit benutzerdefinierten CSS-Variablen

Innerhalb von calc können auch benutzerdefinierte Variablen verwendet werden, dies kann sehr praktisch sein, beispielsweise in Media Queries.

root {
  --single-padding: 10px;
}

.column {
  padding: calc(var(--single-padding) * 2);
}

Grids berechnen

Die Größen von Grid-Elementen können damit automatisch berechnet werden.

.column {
  width: calc(100% / 4);
  float: left;
  padding: 10px;
}

Responisve

Für Media Queries muss lediglich die Spaltenanzahl geändert werden.

@media screen and (max-width: 800px) {
  .column { 
    width: calc(100% / 2); 
  }
}

Fallback definieren

Wer sich bei der Kompatibilität von calc() nicht sicher ist, der kann leicht ein Fallback einbauen.

.element {
    width: 90%;
    width: calc(100% - 30px);
}

Eine komplette Übersicht über die Funktion gibt es hier.