CSS: jede Unterseite auf 100% Höhe

7 Kommentare

Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website “wackelt”.

Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste erzwingt. Hier eine Methode um dies zu realisieren:

html, body {
    height: 100%; /* Streckt den angezeigten Bereich auf 100% */
}
#container {
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height: auto !important; /* Für moderne Browser */
    height: 100%; /* "Mindesthöhe" für IE <7 */
}

Gefunden auf CSS Div height: 100%.

Zuerst streckt man sowohl body als auch html, den Hauptknoten im Dokumentbaum, auf 100%. Anschließend vergibt man ein Mindesthöhe von 100% und weist der Höhe an sich einen automatischen Wert zu. Da aber der Internet Explorer 6 und kleiner nichts mit der Eigenschaft min-height anfangen können wird denen height: 100%; ... da die ja die Angaben zu Höhe als "Mindesthöhe" interpretieren.

Das obere Code-Beispiel war noch um die CSS-Deklaration overflow: hidden !important; reicher. Diese Deklaration bewirkte bei Firefox, dass der div-Kontainer, wenn er über den Anzeigenbereich hinausgeht, sich auch bis zum Bildschirmende ausbreitet. Ich konnte bei Firefox 8 keinen Unterschied feststellen mit und ohne diese Deklaration.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

7 Kommentare

  1. ich benutze immer:

    /* always force a scrollbar in non-IE */
    html { overflow-y: scroll; }

    Das erzeugt auch immer die Scrolleiste auf der rechten Seite.
    Ob es aber auch vernünftig im IE6 geht kann ich nicht sagen, da mir dieser nicht zum testen zur Verfügung steht! Im IE9 klappts!

  2. […] Mit css jede Unterseite mit 100% Höhe erstellen Mittwoch, 23. November 2011 – 17:05Wenn Sie auf Ihrer Website eine zentrierte Anordnung wählen ist bei zu wenig Inhalt der Scrollbalken weg. Wechseln Sie jetzt zu einer Unterseite mit viel Inhalt erscheint der Scrollbalken und die Website wackelt. Wie Sie das mit Hilfe von css leicht und schnell regeln erfahren Sie bei perun.net. […]

    1. @Torsten,

      overflow-y: scroll; kann ich nur dem body vergeben, weil ich sonst die Scrollleiste direkt am Conatiner also am Inhalt habe. Vergebe ich body dann habe ich auf meinen Test-IEs (7, 6 und 5.5) eine eine doppelte Scrollleiste.

  5. @Bernd: Dann hast du immer eine Scollbalken und das auch noch unabhängig davon, ob du überhaupt soviel Inhalte auf den Seiten ausgibst oder nicht. Gerade wenn man nur einen Bestätigungstext oder ähnliches ausgibst, ist dies meiner Meinung nach kein empfehlenswertes Vorgehen.

  6. @Perun: Bei body kommt tatsächlich die zweite Scrolleiste, aber nicht bei html. Funktioniert korrekt im IE6 und IE7.

    @Heiko: Das ist doch genau das, was wir bezwecken wollen!

    @Bernd: Das erzeugt bei mir leider genau wie die Lösung von Vladimir viel Freiraum nach unten, den man dann scrollen kann, auch wenn da gar nichts mehr ist. Mit der Lösung von Dan/Kommentar #1 ist nur ein deaktivierter Scrollbalken zu sehen. Genau das was ich brauche.

Kommentare sind geschlossen.