Design für Print und Web

Elemente in Opera auf 100% Höhe ausdehnen

21.12.2006 um 17:48 Uhr
Emersacker
abgelegt unter CSS-Tipps

Emersacker. Während in CSS-Layouts verwendete DIV-Container in Browsern wie Firefox und InternetExplorer leicht eine bestimmte Höhe in Prozentangaben zugewiesen werden kann, muss man für die Browserfamilie Opera noch eine definitive Höhenangabe für die Elternelemente BODY und HTML zusätzlich codieren.

Anscheinend nehmen die Elemente BODY und HTML unter Opera nicht automatisch den Wert von 100% der Fenstergröße an.

Er muss ihnen daher erst per CSS-Anweisung zugewiesen werden:


html, body  {
  height:100%;
  }

Untergeordnete Kindelemente, sagen wir zum Beispiel eine seitliche Menüleiste, werden sich nun auch wie erwartet ausdehenen, wenn ihnen eine prozentuale Höhenangabe, z.B. mit min-height verordnet wird:


div#menu {
  position:absolute;
  min-height:100%;
  }

Seltsamerweise funktioniert der Trick aber nicht, wenn sich div#menu in einem umgebenden absolut positionierten div befindet, der ebenfalls mit min-height:100% ausgedehnt wurde.

Folgende alternative Anweisung, in der der Menu-Container die Höhe von seinem Elternelement "erbt", löst das Problem:


div#menu {
  position:absolute;
  min-height:inherit;
  }

Unglücklicherweise stört diese Anweisung aber den InternetExplorer 7, der nun das Menu nicht mehr wie erwartet ausdehnt. Ich bin auf keine andere Lösung gestoßen, als die Anweisung in einen extra für Opera eingerichtetem Stylesheetbereich zu schreiben, der von anderen Browsern nicht beachtet wird:


<style type="text/x-opera-css">
/*<![CDATA[*/

div#menu {
  min-height:inherit;
  }

/*]]>*/
</style>

Der seltsame Mime-Typ wird nur von Opera angenommen - die Information dazu stammt aus dem Forum von SELFHTML, tja, was wäre man ohne gute kostenlose Informationen aus dem Netz...