Festlegung der Gesamtgröße mit CSS

Published on: 14. November 2009
Autor:
Kategorien: Verschiedenes
Schlagwörter: ,

Den CSS-Festlegungen entsprechend wird jedes Element durch ein Rechteck begrenzt. Die Ausmaße ergeben sich aus folgender Formel (Boxmodell):

Gesamtgröße = Außenabstand (margin) +
              Rahmen (border) +
              Innenabstand (padding) +
              Inhalt (width bzw. height)

Die Eigenschaften "width" und "height" beziehen sich jedoch nur auf den Inhalt. Für die Gesamtgröße gibt es keine separate Eigenschaft. Dadurch wird die Festlegung der Gesamtgröße eines Elements erschwert, wenn zusätzlich Rahmen oder Abstände eingestellt sind.

Demonstration des Problems

Im folgenden Beispiel ist ein einzelner Container mit einer festen Breite und einem Rahmen dargestellt.

Dieser einzelne Container hat eine Breite von 300 px zuzüglich einer Rahmendicke von 20 px. Um eine Gesamtbreite von 300 px festzulegen, muss die Breite um die Rahmendicke reduziert werden. Bei Verwendung unterschiedlicher Einheiten für Breite und Rahmendicke ist dies jedoch nicht möglich.

Im Vergleich mit dem Referenzobjekt wird der Aufschlag auf die Gesamtbreite aufgrund des verwendeten Rahmen deutlich.

Dieses Referenzobjekt hat exakt eine Breite von 300 px.

Lösung durch absolute Positionierung

Durch Verwendung zweier verschachtelter Container kann eine bestimmte Gesamtgröße festgelegt werden, die unabhängig von Rahmen und Abständen ist. Zusätzlich können beliebige Einheiten für Rahmendicke und Abstände gewählt werden.

Dieser Container hat einschließlich des Rahmens und des Innenabstands eine Breite von 300 px. Die Rahmendicke von 0.25 em und der Innenabstand von 0.5 em müssen nicht von der Breite des Containers abgezogen werden.

Der äußere Container wird als Bezugspunkt für das Positionieren festgelegt. Rahmen und Abstände werden dem inneren Container zugewiesen. Durch das absolute Positionieren des inneren Containers wird dieser an den Begrenzungen des äußeren Container ausgerichtet.

<div style="width:300px; height:13em; position:relative">
  <div style="position:absolute; top:0; right:0; bottom:0; left:0;
    border:0.25em solid #ff9; padding:0.5em">
    ...
  </div>
</div>

Nachteilig ist, dass immer die Gesamtbreite und Gesamthöhe angegeben sein müssen. Eine automatische Höhenanpassung entsprechend dem Inhalt ist daher nicht möglich.

Alternative mit automatischer Höhenanpassung

Betrachtet man noch einmal das Boxmodell, so ergibt sich eine weitere Lösung mit automatischer Höhenanpassung.

Dieser Container hat einschließlich des Rahmens und des Innenabstands eine Breite von 300 px. Die Rahmendicke von 0.25 em und der Innenabstand von 0.5 em müssen nicht von der Breite des Containers abgezogen werden.

Der äußere Container dient lediglich zur Festlegung der Gesamtbreite. Rahmen und Abstände werden am inneren Container eingestellt.

<div style="width:300px">
  <div style="border:0.25em solid #dd9; padding:0.5em">
    ...
  </div>
</div>

Höhenangaben sind bei dieser Lösung nicht möglich. Daher muss je nach gewünschtem Effekt einer der vorgestellten Ansätze verwendet werden.

Ähnliche Artikel

  • Das beschriebene Problem kann ab CSS3 mit Hilfe der Eigenschaft „box-sizing“ elegant gelöst werden.

Schreiben Sie einen Kommentar