>> Home >> Tipps & Tricks >> min-height

min-height - was ist das eigentlich?

Moderne WEB-Sites speichern das Layout einer Seite in einer unabhängigen Datei. Damit ergeben sich zum einen kleinere Seiten und zum anderen wesentlich lesbarer HTML-Code. Die Layout-Beschreibung ist dabei ein Cascading Style Sheet. Die CSS-Sprache ist eigentlich standartisiert. Doch wie immer macht Microsoft alles anders.

Mit der min-heigth Eigenschaft wird nun laut Standard für ein Seitenelement eine minimale Höhe festgelegt. Leider implementiert der IE diesen Teil gerade nicht. Man kann sich aber mit 2 anderen Eigenschaften des IE behelfen.

Lösung

Wie jeder CSS-fähige Browser implementiert auch der IE die height Eigenschaft. Außerdem lässt er in Javascript formulierte Ausdrücke als Werte zu. Schreibt man für einen Standard-Browser:

min-height: 500px;

so erreicht man das gleiche im IE mit:

height: expression( ( document.getElementById("main").style.height < 500 )
                    ? 500
                    : document.getElementById("main").style.height );

Nun bleibt noch die Frage, wie setze ich eine Stylesheet ein, der nur für den IE Gültigkeit haben soll. Dafür hat Microsoft spezielle HTML-Kommentare erfunden:

<!--[if IE]>
      <style type="text/css">@import url(/ie.css);</style>
<![endif]-->

Dieser Text wird von anderen Browsern vollständig als Kommentar betrachtet. Der IE jedoch führt die <style> Anweisung aus und importiert einen Stylesheet, der so nur im IE gültig ist.