Über mich

Startseite arrow Tipps & Tricks arrow Min-Height: Die mindest Höhe und ihre Probleme

Min-Height: Die mindest Höhe und ihre Probleme

Montag, 29. Juni 2009
Geschrieben von Armin Vieweg
CSS bietet neben der klassischen Höhe noch die "min-height"-Eigenschaft an. Also wie hoch ein Element mindestens sein muss. Das ist sehr hilfreich, klappt nur nicht immer.

Height gibt eine feste Höhe an. Das Element ist also immer so hoch, egal wie viele Inhalte darin sind. Sind es mehr, bleibt die Höhe des umschließenden Elementes aber konstant, was teilweise nicht so hübsch aussehen kann.



Dafür gibt es in CSS die min-height Eigenschaft.
Sie gibt keine fixe Höhe vor, sondern beschreibt wie hoch ein Element mindestens sein darf.

So könnte der CSS-Code oder grauen Box aussehen:

.box {
  background:#EDEDED;
  border:1px solid #DEDEDE;
  padding:5px;
  width:120px;
  min-height:100px;
}



Die Breite der grauen Box ist immer 130 Pixel (120 Pixel breite + (2x 5 Pixel Innenabstand links und rechts)). Die Höhe jedoch ist nun flexibel. Sie ist mindestens 110 Pixel hoch und nach oben hin offen, je nach Inhalt.

Ist eine solche Box z.B. nur eine Zeile hoch kann das ziemlich unschön aussehen, daher ist ein solcher Befehl ziemlich praktisch.


Problem im IE6
Der Internet Explorer 6 kennt min-height gar nicht. Das CSS-Attribut height wird im IE6 so verwendet wie in allen anderen Browsern die min-height. Das führt somit unweigerlich zu Konflikten, wenn man keine browserspezifische Anweisungen gibt. Nachfolgend drei Lösungsansätze:



1. Min-Height durch Height mit Unterstrich
Diese Verfahrensweise nutzt mein geschätzter Kollege Sven gerne (dem ich auf diesem Weg zum bestandenen Fachinformatiker/Anwendungsentwickler gratulieren möchte :D), von dem ich auch von dieser Variante erfahren habe.

Man fügt dem CSS etwas hinzu:

.box {
  background:#EDEDED;
  border:1px solid #DEDEDE;
  padding:5px;
  width:120px;
  min-height:100px;
  _height:100px;
}



Jetzt könnte man denken: "Whoo, ein neues Feature in CSS? Der Unterstrich _",
doch tatsächlich ist es einfach ein Fehler.

Ein Fehler der jeden Browser (außer den IE6) dazu veranlasst diese Zeile komplett zu ignorieren. Der Internet Explorer 6 hingegen ignoriert in diesem CSS-Beispiel den min-height (weil er den Befehl nicht kennt) und nutzt stattdessen munter den Height-Befehl da ein voranstehender Unterstrich (_) wohl keine Syntax-Verletzung darstellt.

Height wird im IE6 ja ebenso interpretiert wie in allen anderen Browsern die Min-Height-Eigenschaft, daher kommt man so zu einem einheitlichen Ergebnis in allen Browsern.


2. Verschiedene CSS-Dateien für den Internet Explorer
Dank den hier beschriebenen Conditional Comments oder einer einfachen PHP-Funktion ($_SERVER['HTTP_USER_AGENT'] und get_browser()) kann man je nach verwendetem Browser individuelle Inhalte darstellen. So kann man auch eine spezielle CSS-Datei für den IE6 zusätzlich laden in der folgendes steht:

.box {
  height:100px;
}



So hat man keinen syntaktischen CSS-Fehler provoziert und kommt zum selben Ergebnis.



3. Das Element .minheight
Ich persönlich verwende in meinen Projekten eine Variante, die vielleicht etwas umständlicher, dafür syntaktisch sowie logisch einwandfrei ist.

Ich füge in die Box ein Element mit einer CSS-Klasse (.minheight) und gebe diesem Objekt die Breite 1 Pixel und die Höhe x Pixel, wobei x für die gewünschte Mindesthöhe steht.

Dieses Element muss immer als erstes in der Box erscheinen. Der HTML-Code sieht dann so aus:

<div class="box">
  <div class="minheight"></div>
  Inhalte der Box
</div>



Das passende CSS so:

.box .minheight {
  float:right;
  height:100px;
  width:1px;
}



Bei der Verwendung des Float-Befehls sollte man aber auch daran denken, es mit clear:right; entsprechend wieder aufzuheben ;-)

Diese Lösung hat zwei Nachteile:
1. Sie ist umständlicher
2. Sie nimmt ein Pixel Platz in unserer Box weg. Wer darauf Wert legt sollte zu einer der anderen beiden Lösungen tendieren.


Fazit
Drei verschiedene Lösungen, mit jeweils einem ganz eignem Charme. Ich persönlich empfehle für die Sauberkeit die zweite oder dritte Lösung. Wenn es schnell und schmerzlos gehen muss, auch mal die erste Variante.

Dies alles ist nur für den Internet Explorer 6 nötig. Wenn sein Marktanteil mal auf ein verschwindend geringes Prozentpünktchen geschrumpft ist, sind solche Tricksereien nicht mehr notwendig.


  Kommentare (2)
 1 Geschrieben von: Michael, am 29.06.2009 um 17:48
Die 3. Möglichkeit ist leider nicht so attraktiv wenn man sich hinterher einen leeren Div's ansieht. ;) 
 
Für Quelltext-Ästheten der Untergang.
 2 Geschrieben von: Armin Vieweg, am 29.06.2009 um 19:23
Kannst ja ein 1x1 Pixel, transparentes GIF reinpacken :P
Letzte Aktualisierung ( Montag, 29. Juni 2009 )
 
< Zurück   Weiter >