Während der Internet Explorer den vertikalen Scrollbalken standardmäßig immer anzeigt, zeigen alle Mozilla-Browser die vertikale Scroll-Leiste nur dann an, wenn sie auch notwendig ist. Dies kann in einem Design den negativen Nebeneffekt haben, dass die Seite anfängt zu springen, sobald der Seiten-Inhalt kleiner als die Fenstergröße ist. Dieser Effekt ist vor allem bei zentrierten Layouts zu erkennen. Hier ist die Seite mit Scroll-Leisten weiter Links im Gegensatz zu Seiten, an der keine Scroll-Leiste auftaucht. Dies stört natürlich den Gesamteindruck einer Seite.

Problemlösungen gibt es viele: über einfache CSS-Anweisungen über die Verwendungen von JavaScript bis hin zu XUL. Doch nicht alle sind bei der Verwendung sinnvoll, weil z.B. JavaScript deaktiviert ist. Deshalb hier die - meiner Meinung nach - sinnvollsten Ideen und ihre Probleme.

Im IE die Scroll-Leiste nur einblenden wenn nötig

Will man erreichen, dass die Seite auf allen Browsern gleich aussieht, so kann man den Internet-Explorer dazu bringen, die Scroll-Leiste bei kleinen Seiten auszublenden.

body { overflow:auto; }

Leider scheint Opera in der Version 7.0 und 7.23 hiermit ein Problem zu haben und zeigt schlicht gar nichts an.

Die Seiten-Höhe erhöhen

Man kann auch einfach die Seitengröße erhöhen, so dass immer ein Scrollen nötig ist. Seit der Version 1.02 des Firefox-Browsers muss hier dieser CSS-Ausdruck verwendet werden:

html, body { height:101%; }

Dies hat natürlich die negative Eigenschaft, dass einem Benutzer vorgegaukelt wird: "es gibt noch unten was zu lesen". Das liegt daran, dass die Scroll-Leiste sich hier unproportional verhält und es ausschaut, als würde noch viel kommen. Somit ist das natürlich nicht optimal, aber das "Springen" im Firefox ist unterbunden.

Elegante Lösung

Die eleganteste Lösung, die ich bisher gefunden habe, verwendet schlicht diesen Code:

html {height: 100%; margin-bottom: 1px; }

Durch die Angabe des sehr kleinen Randes am unteren Ende der Seite ist eine Scroll-Leiste vorhanden, gleichzeitig kommt der Benutzer nicht auf die Idee, dass sich hier noch was befinden könnte.

Diese Lösung soll mit allen aktuellen Browsern problemlos funktionieren, so dass kein CSS-Hack notwendig ist.

von Mathias Bank [http://www.thunder-2000.com].