FREE HTML5 AND CSS3 TEMPLATES / OPEN SOURCE LEARNING

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 ( - )

Spalten kalkulieren

#drei article{
    width: calc(100% / 3);
    border:1px solid #f67;
    float:left;
    height: 100px;
    }

#five article{
    width: calc(100% / 5);
    border:1px solid #f67;
    float:left;
    height: 100px;
    }
    

#seven article{
    width: calc(100% / 7);
    border:1px solid #f67;
    float:left;
    height: 100px;
    }
    

Responsive Spalten kalkulieren

.box {
  width: calc(100%/2);
  height: 150px;
  background: #0CF;
  border: 1px solid #000;
  float:left;
}

@media screen and (min-width:600px) {
.box { 
	width: calc(100%/4);
	background: #0F6;
	}
}
@media screen and (min-width:800px) {
 .box {
	width: calc(100%/6);
	background: #999;
 	}
}
@media screen and (min-width:1200px) {
 .box {
	 width: calc(100%/8);
	 background: #CF0;
	}
}

Spalten kalkulieren und margin subtrahieren

.pad-box {
  width: calc(100% / 4 - 10px);
  height: 150px;
  background: #F9F;
  border: 1px solid #000;
  float:left;
  padding: 20px;
  margin: 0 10px 10px 0;
}

Grid-Spalten kalkulieren

[class^="column"] {
    background: yellow;
    border: 1px solid #000000;
    float: left;
    min-height: 200px;
}
.column-1-6 { width: calc(100% / 6);}
.column-2-6 {width: calc(100% / 6 * 2);}
.column-3-6 {width: calc(100% / 6* 3);}