Tutorial

CSS Funktionen: calc()

calc() - Berechnen von Höhen und Breiten

Mit CSS3 ist endlich eine Funktionen erschienen, die mir mein Leben unheimlich leichter macht: Gerade beim Verwenden von prozentualen Maßen und fixen Pixelmaßen, war man immer auf Javascript angewiesen, wenn es um die korrekte Berechnung von Maßen ging. Heute geht dieses ganz einfach mit calc():

div {
border: 2px solid #000;
width: calc(25% - 2*2px);
}

In obigem Beispiel haben wir einen Container, der einen 2px-breiten Rahmen hat.
Hat man beispielsweise 4 ebensolcher Container nebeneinander positioniert, würde der letzte Container aus der Seite herauslaufen, da die effektive Breite ja nicht nur 25% wäre, sondern 25% + 4px (da wir ja den Rahmen von 2px Breite links und rechts miteinberechnen müssten).
In dem Snippet ziehen wir aber von den 25% noch 4px ab, so dass es eine Gesamtbreite von 25% ergibt und somit 4 Container nebeneinander dargestellt werden können.

Ich nutze die calc()-Funktion am Meisten fürs Berechnen von ganzen Browser-Höhen. Wenn wir beispielsweise einen Container haben, der die volle Höhe des Browserfensters einnehmen soll und sich in dem Container irgendwas befindet, was eine fixe Höhe hat.

HTML

<div>
<div class="oben">
Ene Mene Miste
</div>
<div class="rest">
Was rappelt in der Kiste?
</div>
</div>

CSS

html {
height: 100%;
}

/* Der Container hat die volle Höhe des Browserfensters */
div {
height: 100%;
}

/* In diesem Container befindet sich ein weiterer, der die fixe Höhe von 78px hat*/
div.oben {
height: 78px;
}

/* Und hier haben wir den zweiten, der den Rest ausfüllen soll */
div.rest {
height: calc(100% - 78px);
}

In diesem Beispiel haben wir einen Container, der die volle Seitenhöhe nutzen soll und der zwei Container fasst: Wir haben den Container mit der Klasse oben, der die fixe Höhe von 78px hat und wir haben den Container rest, der die Differenz zwischen 100% - 78px darstellen soll.

Hinweis:
- Zwischen calc und der Klammer darf sich kein Leerzeichen befinden
- Zulässig sind nur die Rechenarten + (Addition), - (Subtraktion), * (Multiplikation) sowie / (Division).
- Zwischen den + und - -Zeichen muss sich zwingend ein Leerzeichen befinden, bei * und / ist das irrelevant.

Dieses Tutorial bewerten

zurück

Navigation einschalten