WordPress & Webwork - perun.net

CSS: jede Unterseite auf 100% Höhe

Von am 23. 11. 2011 um 15:52 – Aktualisiert am 02.12.2011 um 19:52

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.

Diesen Artikel weiterempfehlen oder später lesen:

auf Kindle (später) lesen

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
,  
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

7 Kommentare »»

  1. 1. – Dan

    Kommentar vom 23.11.2011 um 16:29

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

    Pingback vom 23.11.2011 um 17:05

    [...] 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. [...]

  3. 3. – Torsten Landsiedel

    Kommentar vom 23.11.2011 um 17:12

    Würde das nicht auch ein "overflow-y: scroll" erzeugen?

    Siehe Kommentare beim Kickstart von Gerrit.

  4. 4. – Perun

    Kommentar vom 23.11.2011 um 17:20

    @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. 5. – Bernd

    Kommentar vom 23.11.2011 um 20:51

    was ist mit :

    body,html{height:101%} ? :)

  6. 6. – Webstandard-Blog (Heiko)

    Kommentar vom 24.11.2011 um 09:36

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

  7. 7. – Torsten Landsiedel

    Kommentar vom 19.12.2011 um 14:22

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

Hinweis:
WordPress 3.5 für Admins & Webmaster (pdf)
Ausdruckbar, Volumenlizenzen zu sehr fairen Preisen.

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.