CSS Min-Height Simulation für Internetseiten

Veröffentlicht am 31.12.2005, letzte Änderung am 11.09.2006

Um für Elemente einer HTML-Seite eine minimale Höhe anzugeben, gibt es in CSS 2.0 die min-height-Eigenschaft. Leider wird diese nicht vom Microsoft Internet Explorer 6.0 unterstützt.

CSS Min-Height Simulation für feste Pixelwerte

Auf http://www.greywyvern.com/code/min-height-hack.html wird der CSS min-height Hack beschrieben, der erlaubt, für ein div-Element auch ohne Verwendung der min-height-Eigenschaft eine minimale Höhe in Pixeln anzugeben.

Als Beispiel dient ein div-Element, für das eine minimale Höhe von 50 Pixeln angegeben werden soll:

<div>
  Inhalt
</div>

Die minimale Höhe wird über zwei zusätzliche div-Element und CSS-Code erzwungen.

<div>
  <div class="prop"></div>
  Inhalt
  <div class="clear"></div>
</div>

Das Element mit der Klasse prop bekommt die gewünschte Höhe zugewiesen und wird nach rechts verschoben.

.prop {
  height: 50px;
  float: right;
  width: 1px;
}

Das Element mit der Klasse clear wird nach dem Originalartikel für ältere Mozilla- und Firefox-Versionen benötigt, damit der Inhalt durch das prop-Element bis nach unten reicht. Die overflow-Eigenschaft soll gesetzt werden, da der Microsoft Internet Explorer 6.0 im Standard-kompatiblen Modus div-Elemente mit einer Höhe von weniger als 1em nicht automatisch erzeugen soll.

.clear {
  clear:both;
  height:1px;
  overflow:hidden;
}

Hier sind drei Beispiele für den CSS min-height Hack, eine leere Box, eine Box, bei die niedriger als 50 Pixel sein sollte, und eine, die höher sein sollte. Zur Verdeutlichung ist die prop-Klasse rechts und die clear-Klasse unten in dunkelgrau dargestellt:

Weniger als 50px Höhe

Das ist hoffentlich genug Text für mehr als 50px Höhe

Anpassung der Simulation für Internetseiten

Um für eine komplette HTML-Seite zu erreichen, dass sie mindestens die Höhe des Browserfensters einnimmt (dass also die Fußzeile auch für Seiten mit kurzem Inhalt immer unten im Browserfenster erscheint), muss der CSS min-height Hack modifiziert werden.

Ausgangspunkt

Statt eines div-Elements ist der Inhalt einer HTML-Seite in ein body-Element eingeschlossen:

<body>
  Inhalt
</body>

Der Text einer HTML-Seite darf nicht direkt im body-Element stehen, daher wird er in ein div-Element eingeschlossen. Zusätzlich nehmen wir ein div-Element für die Fußzeile auf:

<body>
  <div>
    Inhalt
  </div>
  <div>Fußzeile</div>
</body>

Um einen Ausgangspunkt zu haben, der dem des CSS min-height Hack ähnelt, führen wir ein div-Element mit der Klasse prop ein, und versehen das div-Element der Fußzeile mit der Klasse clear. Da die Elemente auf der Seite eindeutig sein sollten, ist es sinnvoll, statt dem class-Attribut das id-Attribut zu verwenden. Um uns am Original zu halten, lassen wir es in diesem Beispiel aber sein.

<body>
  <div class="prop"></div>
  <div>
    Inhalt
  </div>
  <div class="clear">Fußzeile</div>
</body>

Im CSS passen wir die Höhe für die prop-Klasse die Höhe auf 100% an. Für die clear-Klasse setzen wir die Höhe der Fußzeile (hier auf 100px), und löschen die overflow-Eigenschaft, da diese mit der neuen Höhe nicht mehr benötigt wird:

.prop {
  height: 100%;
  float: right;
  width: 1px;
}

.clear {
  clear:both;
  height:100px;
}

Problem 1: Zu niedrig

Am Ausgangspunkt hängt die Fußzeile direkt unter dem Inhalt und nicht am unteren Bereich des Fensters. Das liegt daran, dass nach der CSS2-Spezifikation das prop-Element nun 100% der Höhe des umschließenden Blocks, also des body-Elements bekommt. Das hat standardmäßig die Höhe auto, nimmt also nur soviel Platz ein, wie nötig. Wir müssen also für das body-Element eine Höhe von 100% zuweisen. Für die Kompatibilität zu Mozilla und Safari muss auch das umschließende html-Element die Höhe 100% zugewiesen bekommen:

html, body {
   height: 100%;
}

Problem 2: Zu hoch

Vom Regen in die Traufe: Jetzt ist die Fußzeile zwar unten, aber zu weit: Die Seite ist immer höher als der zur Verfügung stehende Platz.

Ein Teil der zu großen Höhe liegt an den Standardwerten für Innen- und Außenabstand des body-Elements. Also setzen wir Innen- und Außenabstand auf 0:

body {
  margin: 0;
  padding: 0;
}

Das Problem ist kleiner geworden, die Seite ist aber immer noch zu hoch. Das liegt daran, dass unser prop-Element 100% der Seitenhöhe bekommt, und zusätzlich noch die Fußzeile mit 100 Pixel zu Buche schlägt. Die Seite ist also um 100 Pixel zu hoch.

Über die Höhe des prop-Elements können wir das Problem nicht lösen, da wir eine relative Größe in Prozent von einer absoluten Größe in Pixeln subtrahieren müssten. Wollen wir die absolute Höhe der Fußzeile beibehalten, müssen wir die Subtraktion in einer anderen Weise vornehmen. Das erreichen wir mit dem Außenabstand des prop-Elements: Indem wir ihn unten auf -100 Pixel setzen, werden unten anliegende Elemente beim Layout, also in unserem Fall die Fußzeile, 100 Pixel höher angesetzt:

.prop {
  height: 100%;
  float: right;
  width: 1px;
  margin: 0 0 -100px 0;
}

Die Min-height Simulation ist fertig

Damit ist das Ziel erreicht: Solange das Browserfenster groß genug ist, bleibt die Fußzeile am unteren Rand. Wird das Browserfenster zu klein für die Seite, erscheinen Scrollbalken. Diese min-height Simulation wurde mit Microsoft Internet Explorer 6 auf Windows XP SP 2 sowie mit Safari 2.0.2 und Firefox 1.0.6 auf Mac OS X 10.4.3 erfolgreich getestet.

Auf meiner Internetpräsenz http://tammofreese.de ist eine Variante der min-height Simulation eingesetzt, die auch eine Kopfzeile berücksichtigt. Beim div-Element, das die minimale Höhe garantiert, wird dafür auch oben ein negativer Außenabstand verwendet.

Tammo Freese