Im Internet Explorer wird standardmäßig eine vertikale Scrollbar angezeigt, selbst wenn der Inhalt der Webseite nicht länger als das Browserfenster ist. Das hat den Vorteil, dass eine zentrierte Webseite nicht “springt”, wenn der Inhalt je Seite länger/kürzer als die Höhe des Browserfenster ist. Manche Kunden, vor allem aber Grafiker stört das “springen” der Seite, aber es gibt einen einfache Workaround um das zu verhindern.
Lösung für den Firefox:
Hierfür fügt man im Stylesheet folgenden Code ein:
html {
overflow: -moz-scrollbars-vertical;
}
Leider funktioniert diese Lösung nur im Firefox und wird von allen anderen Browsern ignoriert.
Die Allround-Lösung:
Im Stylesheet setzt man die Höhe von html auf 100% und fügt einen Außenabstand von 1px ein:
html {
height: 100%;
margin-bottom: 1px;
}
Diese Lösung funktioniert in allen gängigen Browsern, allerdings entsteht dadurch ein Scrollbereich von 1px. Auch das kann als gleich störend empfunden werden, wie das “Springen” der Seite selbst.
Die CSS3-Lösung:
Auch diese Lösung kann man als “Allround-Lösung” bezeichnen. Obwohl die overflow-y-Eigenschaft erst in CSS3 enthalten sein wird, wird sie von den gängigsten Browsern (Firefox 1.5+, Safari 1.0+, Konqueror 3.3+,…) bereits unterstützt:
html {
overflow-y: scroll;
}
In diesem Fall wird die Scrollleiste deaktiviert dargestellt, wenn der Inhalt der Seite kürzer als die Höhe des Browserfenster ist, andernfalls wie gewohnt eine Scrollleiste dargestellt.
Opera interpretiert diese Eigenschaft leider (noch) nicht, weshalb man in diesem Fall die “Allround-Lösung” als Workaround für Opera in die Seite integrieren muss. Hierfür fügt man diesen in opera.css ein und integriert ihn wie folgt in die Seite:
<link rel="stylesheet" href="opera.css" type="text/x-opera-css" />
Recent Comments