calc

Übersicht

Die CSS Funktion calc() kann anstelle der folgenden Werte verwendet werden: <length>, <frequency>, <angle>, <time>, <number> und <integer>. Mit der CSS Funktion calc() lassen sich mehrere Werte miteinander verrechnen.

Es ist auch möglich,  calc() Funktionen ineinander zu verschachteln.

Syntax

calc(Ausdruck)

Werte

Ausdruck

Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.

Ausdrücke

FIXME: mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+

Addition.

-

Subtraktion.

*

Multiplikation (Muss mindestens eine <number> enthalten).

/

Division (Divisor muss eine <number> sein).

Es können beliebig viele Operatoren aneinander gekettet werden. Es können auch verschiedene Einheiten miteinander verrechnet werden und Klammern gesetzt werden.

Beispiele

Relative Grösse eines Objekts mit einer absoluten Positionierung

Mit calc() ist es kein Problem mehr, die dynamische Grösse eines Objekts zu bestimmen, dessen Position absolut ist. In diesem Beispiel wurde ein Banner erstellt, dass auf beiden Seiten einen Abstand von 40 Pixeln zum Rand aufweisen soll.

Links ist die Position mit left: 40px bereits definiert. Jetzt wird mit calc(100% - 80px) von der Gesamtlänge 80 Pixel Abgezogen, so verbleibt am Rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

.banner {
  position: absolute;
  left: 40px;
  width: 90%;               /* fallback for browsers without support for calc() */
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

<div class="banner">This is a banner!</div>

Relative Grösse eines Objekts mit absoluten Abständen

Ein weiterer Anwendungsbereich ist die Grössenanpassung von Objekten, welche einen fixen Abstand definiert haben:

input {
  padding: 2px;
  display: block;
  width: 98%;               /* fallback for browsers without support for calc() */
  width: calc(100% - 1em);
}

#formbox {
  width: 130px;             /* fallback for browsers without support for calc() */
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Der Container indem das Eingabefeld liegt soll 1/6 der Gesamtbreite einnehmen. Für die Grösse des Eingabefelds wählen wir einen Abstand zum Container von 1em.

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

Spezifikation

Browser Kompatibilität

Siehe auch

• Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog