Kalkulieren mit CSS3 - calc
Im Responsive Design verwendet eine Website oft mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Schwierigkeiten entstehen oft, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Die Kombination aus width:100% und padding/margin/border.
Eine einfache Möglichkeit den Code schlank zu gestalten bietet die Kalkulationsmöglichkeit der CSS-Eigenschaft calc().
Die Angabe calc() rechnet besser wenn box-sizig angewendet wird.
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding:0;
}
Rechnen mit CSS
Die Eigenschaft calc() erlaubt klassisches Grundrechnen.
Wichtig: vor und nach dem Operator muss ein Leerzeichen stehen. Divisionen (Teilen) durch 0 erzeugt Fehler.
Syntax
calc([wert] [operator] [wert])
Operatoren
Multiplikation ( * )
Division ( / )
Addition ( + )
Subtraktion ( - )