Die CSS calc()-Funktion – Berechnungen mit CSS

Moderne Web-Layouts werden zunehmend komplex, gleichzeitig versuchen Entwickler den Code immer weiter zu verschlanken und zu optimieren. Insbesondere im Responsive Design verwendet eine Website beispielsweise mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Das führt oft zu Problemen bei der Vergabe von CSS-Klassen. Eine schöne Möglichkeit den Code von solch überflüssigen CSS-Klassen zu befreien bieten die Kalkulationsmöglichkeiten mit Hilfe der CSS-Eigenschaft calc(). Ähnlich sieht es aus, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Beispielsweise um Werbebanner in einem ansonsten flüssigen Layout zu platzieren.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

Funktionsweise von CSS calc()

Die CSS-Eigenschaft calc() erlaubt die klassischen Grundrechenarten. Bitte beachtet, dass vor und nach dem Operator ein Leerzeichen stehen sollte. Divisionen durch 0 erzeugen einen Fehler.

Operatoren

• Addition ( + )
• Subtraktion ( - )
• Multiplikation ( * )
• Division ( / )

Der Syntax sieht dabei wie folgt aus:

calc([wert] [operator] [wert])

Beispiel 1: Werbung im Responsive Design

Das erste Beispiel verwendet eine simple Subtraktion für die Breite des Hauptinhalts. Das article-Element soll grundsätzlich über eine flexible Breite auf Basis von Prozentwerten verfügen. Da rechts neben dem Inhalt allerdings Werbebanner mit fester Größe untergebracht werden müssen, ziehen wir mit Hilfe von calc() die starre Breite der Sidebar von 100% ab.

Beispiel anzeigen

<div class="site">
  <article>Textinhalte</article>
  <aside>
    <div class="ad">Werbung</div>
    <div class="ad">Werbung</div>
    <div class="ad">Werbung</div>
  </aside>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.site {
  max-width: 900px;
  margin: 0 auto;
}

article {
  float: left;
  width: calc(100% - 135px);
  background: SlateGray;
  padding: 30px;
}

aside {
  float: left;
  width: 135px;
}

.ad {
  height: 125px;
  width: 125px;
  background: tomato;
  margin: 0 5px 5px 5px;
  line-height: 125px;
  text-align: center;
}

Beispiel 2: Gestaltungsraster berechnen

Das zweite Beispiel zeigt die Berechnung eines Gestaltungsrasters mit einer unterschiedlichen Anzahl an Spalten in den verschiedenen Breakpoints. Die Spalten werden dabei immer nur mit einer CSS-Klasse .col ausgezeichnet.

Beispiel anzeigen

<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>

 …

<div class="col">22</div>
<div class="col">23</div>
<div class="col">24</div>

Den CSS-Code habe ich auf die relevanten Bereiche gekürzt.

.col {
  width: calc(100%/3);
  height: 200px;
  background: silver;
  border: 1px solid white;
  float: left;
}

@media screen and (min-width:600px) {
  .col { width: calc(100%/6); }
}

@media screen and (min-width:800px) {
  .col { width: calc(100%/8); }
}

@media screen and (min-width:1000px) {
  .col { width: calc(100%/12); }
}

Browsersupport für die CSS calc()-Funktion

Die Browserkompatibilität sieht gar nicht so schlecht aus. Abgesehen vom Internet Explorer <= 8, unterstützen alle modernen Browser die Funktion. Eine detaillierte Auflistung entnehmt ihr bitte der Website caniuse.com.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

8 Kommentare

1. 

   Daniel

   Verfasst am 13. November 2013 um 11:43 Uhr.

   Der Ansatz von calc() hat mir schon damals gefallen, als es mir das erste Mal über den Weg gelaufen ist. Ich muss mir unbedingt mal die Zeit nehmen eine Fallback-Variante dafür zu suchen. Die bereits weite (rein native) Unterstützung war mir bis dato noch gar nicht bekannt. Danke für’s erinnern. :)

   Antworten
2. 

   Sumit

   Verfasst am 13. November 2013 um 15:48 Uhr.

   Also ich benutze in vielen Projekten schon länger calc() aber IE8 ist NICHT unterstützt. Der Satz müsste also heißen:

   falsch:
   Abgesehen vom Internet Explorer < 8…

   richtig:
   Abgesehen vom Internet Explorer <= 8…

   Leider haben viele Großkunden immernoch IE8 weshalb ich oft workarounds verwende. Aber calc() an sich ist super. Ich wünschte wir hätten noch variablen wir "element-breite" und "parent-width" und so.

   Antworten
   • 

     Jonas Hellwig

     Verfasst am 13. November 2013 um 16:01 Uhr.

     Korrekt. Danke :)

     Antworten
3. 

   Erich

   Verfasst am 15. November 2013 um 10:03 Uhr.

   Hey,
   über Responsive Webdesign lese ich immer gerne. Wird auch in Zukunft immer wichtiger und mit calc() wird das Ganze, wie schon im Text erwähnt, schlanker und optimierter.

   Sorgenkind ist mal wieder der Internet Explorer. Finde ich immer schade, dass so viele diesen Browser noch benutzen und man sich zwangsweise daran orientieren MUSS.

   Und wie schon Sumit vor mir sagte: Workarounds verwenden.

   Antworten
4. 

   hans

   Verfasst am 6. Dezember 2013 um 9:22 Uhr.

   mal ne frage – was mache ich bei einem responsive layout wenn ich das div dann auf 100% breite bringen will und das andere darunter? dachte mir ich mache aus „width: calc(100% – 135px);“ dann einfach „width: calc(100% – 0px);“ aber funktioniert nicht.

   Antworten
   • 

     hans

     Verfasst am 6. Dezember 2013 um 9:24 Uhr.

     sorry hatte nen fehler drin, klappt doch. aber das mit dem IE8 ist doch etwas schade, mache das dann lieber mit jquery.

     Antworten
5. 

   MedienTec

   Verfasst am 12. August 2016 um 18:44 Uhr.

   Schön beschrieben aber es ist ein kleiner fehler in deinem calc.
   deiner ist der;
   .col {
   width: calc(100%/3);
   height: 200px;
   background: silver;
   border: 1px solid white;
   float: left;
   }
   wenn du das so machst ist der dritte col nicht rechts da du 6px durch den border zuviel hast. also sollte es so aussehen
   .col {
   width: calc(100%/3 – 6px);
   height: 200px;
   background: silver;
   border: 1px solid white;
   float: left;
   }
   ich hoffe ich habs nicht übertrieben :)
   gruß MedienTec

   Antworten
   • 

     Jonas Hellwig

     Verfasst am 13. August 2016 um 15:27 Uhr.

     Hallo und vielen dank für deinen Kommentar. Ich habe im Beispiel das Box-Modell umgedreht, daher muss border nicht abgezogen werden. Siehe auch: Mit »box-sizing: border-box;« das CSS Box Model verändern
     Da es in diesem Beitrag allerdings um die calc()-Funktion geht, sind die abgebildeten Code-Beispiele entsprechend gekürzt. Wenn du das normale Box-Modell verwenden möchtest, hast du vollkommen recht.

     Antworten