CSS calc – Breite von Elementen berechnen

Rechnen mit CSS calc und Variablen

CSS calc führt Berechnungen auf gemischten Werten aus, für die wir ansonsten Javascript oder einen CSS Preprozessor einsetzen müssten: z.B. den verbleibenden Platz, wenn wir eine feste Breite von einer relativen Breite abziehen.
calc kann überall eingesetzt werden, wo ansonsten eine Längenangabe oder ein numerischer Wert stehen würde, sowohl für die Positionierung als auch für Farben und die Breite oder Höhe von Elementen.

calc berechnet width, height, margin und weitere Größen – einfacher als Javascript, denn ein Script müsste die Werte bei jedem resize des Browserfensters permanent neu berechnen.

.right { 
   width: calc(100% - 150px);
}
.left { 
   width: 150px; 
}

Die + und - Operatoren müssen immer von Weißraum (Blanks, Leerzeichen) umgeben sein: So wird z.B. der Operand von calc(50% -8px) als Prozentanteil gefolgt von einer negativen Länge geparst – ein invalider Ausdruck. Hingegen ist der Operand von calc(50% - 8px) ein Prozentanteil gefolgt von einem Minuszeichen und einer Länge.

.header {
   width: calc(50% - 8px);
}

* und / Operatoren brauchen keinen Weißraum oder Blanks um sich hierum, aber Leerzeichen sind der Konsistenz zuliebe erlaubt und in diesem Sinne auch empfehlenswert.

Komplexe Berechnungen mit calc

.complex {
   width: calc(100% - 50%/3);
   padding: 5px calc(3% - 2px);
   margin-left: calc(10% + 10px);
}

Bilder mit CSS calc zentrieren

Responsive Slideshow mit CSS – Bild und Text zentriert. Auf kleinen Monitoren wird das Bild nicht einfach zur Briefmarke verkleinert, sondern passt sich nur der verfügbaren Breite an.

simply an A
kaktus
Rote Uhr
Umschlag und Stempel
Schwarze Box

Schlichtes HTML:

<div id="slider">  <!-- Slider container -->
   <div id="onframe">  <!-- onframe -->
      <div class="wrap">
          <figure class="animate1">
             <img src="img/a.jpg" width="680" height="360" alt="simply an A">
          </figure>
         <figure class="animate5">
            <img src="img/pack.jpg" width="680" height="360" alt="Schwarze Box">
         </figure>
      </div>
   </div>  <!-- End onframe -->
</div>  <!-- End Slider Container -->

Damit das Bild immer in der Mitte des Sliders sitzt:

#slider figure {
   width: 680px;  /* Breite des Bildes */
   height: 360px; /* Höhe des Bildes */
   position: absolute;
   left: calc(50% - 340px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
                      |
                      +--> 1/2 von 680px Breite
}

CSS calc mit Variablen

calc operiert auch auf CSS Variablen.

HTML
<div class="wrap">
   <div class="radius"> … </div>
   <div class="circle"> … </div>
</div>
CSS
:root {
   --me-width: 300px;
   --me-marge: 50px;
}
.wrap { 
   width: calc(var(--me-width) + var(--me-marge)); 
   height: calc(var(--me-width) + var(--me-marge));
}
.circle {
   width: var(--me-width); 
   height: var(--me-width);
   top: calc(var(--me-marge) / 2);
   left: calc(var(--me-width) / 2);
}
0153045607590105120135150165180195210225240255270285300315330345
300

Um die Größe und Position der Elemente zu ändern, muss nur eine Variable geändert werden.

Nur wenige Zeilen Javascript:

<script>
var range = document.querySelector(".range input");
var root = document.querySelector(':root');
var val;
range.onchange = function () {
   val = this.value;
   root.setAttribute("style", "--me-width: " + val + "px;");
}
</script>

Beispiel aus Online-HSL-Farbwähler für Webdesigner

Variationen und Alternativen zum Ändern von CSS-Variablen mit Javascript auf Stackoverflow

{ }