Wie kann ich CSS-Längenangaben dynamisch berechnen?

Veröffentlicht: 19. Apr 2011

Das Problem

CSS-Längenangaben müssen in bestimmten Szenarien dynamisch berechnet werden, beispielsweise in Abhängigkeit von der zur Verfügung stehenden Breite, abzüglich eines fixen Wertes.

Die Lösung

Der Internet Explorer 9 unterstützt calc() zur Berechnung innerhalb von CSS-Anweisungen.

  1. Legen Sie einen CSS-Stil an:
    <style type="text/css">#div1 {width: ...;   }</style>
  2. Fügen Sie eine Berechnungsvorschrift ein:
    calc(100% - 405px)