Schlagwort-Archive: Calc Funktion

Rechnen mit CSS oder die „calc()“ Funktion

In CSS kann man zum Beispiel die Breite oder die Höhe eines Objektes auch berechnen lassen. Dies ist sehr nützlich bei variablen Größen der Objekte, oder dem berühmten Problem mit „width:100%“ und einer „margin“ oder „padding“ Angabe. Das „Margin“ bzw. „Padding“ wird ja leider nicht mit in die Breite oder Höhe mit eingerechnet. So sind Objekte mit einer Breite oder Höhe von 100 Prozent und einem Margin oder Padding von 10 Pixel immer 20 Pixel zu Hoch bzw. zu Breit. Diese Probleme kann man durch berechnen der Größen perfekt umgehen. Man verwendet dazu die „calc()“ Funktion. Ich zeige Euch einfach einige Beispiele dazu.
 
Beispiel: die Breite eines Objektes berechnen.
#TestBox {
    /* Es gilt Punkt vor Strich */
    width: calc(100% / 4 - 2 * 5px);
}

Die Breite beträgt hier ein viertel des gesamt zur Verfügung stehenden Raumes minus 10 Pixel. Ihr kennt es ja aus der Schule, euer Mathe Lehrer hat es bestimmt 1000 mal gepredigt. Es gilt auch hier immer „Punkt vor Strich“ genau wie in der Schule.
 
Beispiel: Breite und Höhe eines Objektes berechnen mit einem „Padding“ von 10 Pixel.
#TestBox {
    /* Das Padding muss von der gesamt Breite abgezogen werden */
    padding: 10px;
    width: calc(100% - 2 * 10px);
    height: calc(100% - 2 * 10px);
}

In diesem Fall füllt das Objekt exakt den zur Verfügung stehenden Raum zu 100 Prozent aus weil wir die 20 Pixel Padding von den 100 Prozent abziehen und wir so keine „Übergröße“ des Objektes bekommen.
 
Beispiel: einen Text vertikal zentrieren bei einer Box mit variabler Höhe.
#TestBox:before {
    /* Wir platzieren den Text auch via CSS */
    content: "Dummy Text";
    font-size: 18px;
    left: 0;
    position: absolute;
    text-align: center;
    top: calc(50% - 9px);
    width: 100%;
}

Die Box ist absolut positioniert und füllt von der Breite her gesehen den ganzen ihr zur Verfügung stehenden Raum aus. Sie beginnt ganz links und der Text wird horizontal zentriert ausgegeben. Die vertikale Position des Textes wird durch den „top“ Wert angegeben, und genau diesen lassen wir berechnen (50% der gesamt zur Verfügung stehenden Höhe minus halbe Font Größe). Damit haben wir den Text genau vertikal zentriert, egal welche Höhe die Box bekommt.