Horizontale Verschiebung - Die Zweite

Bereits vor einiger Zeit berichtete ich von einem Bug bzgl. der horizontalen Verschiebung bei langen Seiten. Vor einigen Tagen wies mich ein Kommilitonne von mir darauf hin, dass man dieses Problem auch etwas feiner realisieren kann.

Was ist zu tun?

Anstelle dem HTML Element eine Höhe von 101% zuzuweisen, geht man nun direkt dem Body an den Kragen. Dort notiert man ein overflow-y und weist diesem den Wert scroll zu. Diese Zeil bringt den Browser dazu, immer eine Scrollbar anzuzeigen. Bei kurzen Seiten ist die Scrollbar inaktiv, nimmt jedoch ihren regulär benötigten Platz in Anspruch. Dadurch entfällt durch diesen Hack zum einen die horizontale Verschiebung bei langen Seiten, zum anderen kann man kurze Seiten (im Gegensatz zum alten Hack) nun nicht mehr scrollen.

Codebeispiel

body {
    overflow-y: scroll;
}

Hinweis

Da diese Notation erst ab CSS 3 zur Verfügung steht, funkioniert diese Lösung nicht in allen Browsern. In folgenden Browsern funktioniert diese Lösung jedoch ohne Probleme:

• Internet Explorer 5
• Internet Explorer 5.5
• Internet Explorer 6
• Internet Explorer 6+ (Mac)
• Opera 9.5+
• Firefox 1.5+
• Safari 1.0+
• Konqueror 3.3+

 

Tags: Tipps und Tricks

Erstellt am 05.03.2009 von Niels Lange in Tipps und Tricks

Nach oben

Nach oben

Nach oben