WordPress & Webwork

CSS: jede Unterseite auf 100% Höhe

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.

7 Reaktion(en)

  1. Dan

    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. Pingback: Mit css jede Unterseite mit 100% Höhe erstellen » SigisWorld

    1. Perun

      @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.

  3. Webstandard-Blog (Heiko)

    @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.

  4. Torsten Landsiedel

    @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.

Die Kommentare in diesem Beitrag sind geschlossen.