Sie befinden sich hier:
» 
» 
20.11.2010

Division - Höhe 100% browserunabhängig mit CSS

Kategorie(n): HTML und CSS Tipps

In Browsern werden Höhenangaben zu Divisions mittels CSS unterschiedlich interpretiert. Im folgenden Beispiel wird eine Möglichkeit aufgezeigt, mit der Sie browserunabhängig eine Division auf eine Höhe von 100% des sichtbaren Bereiches setzen können.

Als Basis, damit sich eine Division über die gesamte Bildschirmhöhe erstreckt, muss das Elternelement eine prozentuale Höhenangabe haben. Ist dies nicht der Fall, endet die Division in der Regel mit dem Textende. Dieses Verhalten würde der Angabe height:auto entsprechen.

html, body {
  height:100%;
}

Hier sind die notwendigen Angaben, um die Höhe der Division browserübergreifend auf die gesamte Höhe des Browserfensters, d.h. 100% zu setzen.

#divBsp {
  min-height: 100%;
  height:auto !important;
  height:100%;
}

Erläuterung der CSS-Angaben:

  • die Angaben min-height:100% und height:auto werden von modernen Browsern korrekt interpretiert
  • die Angabe height:100% wird vom Internet-Explorer interpretiert
  • !important bewirkt, dass die Höhenangabe nicht durch nachfolgende Höhenangaben überschrieben wird.
  • und hier ist das Ergebnis

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

6

Kommentare:

24.November2010

super sache! vielen dank!!

26.Februar2014

endlich eine vernünftige antwort auf diese triviale anforderung

07.April2014

Vielen Dank!