Wer schon einmal eine Webseite selbst erstellt hat, kennt das Problem möglicherweise. Vertikale Scrollleisten, die bei einem Aufruf einer anderen Seite ein- oder ausgeblendet werden, können zu springenden Seiten führen.
Der Grund ist der, dass der Browser die Scrollleiste nur dann anzeigt, wenn der Inhalt des Browserfensters nicht Platz hat. Ist irgendwie auch sinnvoll, kann bei zentrierten Seiten aber zu einem kleinen Schönheitsfehler führen. Das Problem an der Sache: Während die eine Seite möglicherweise vertikalen Platz genug hat und ohne Scrollleiste auskommt, ist die andere Unterseite etwas länger und die Leiste wird eingeblendet. Die Zentrierung der Seite führt dazu, dass der Inhalt der Seite beim Erscheinen des Scrollbalkens etwas nach links springt. Anzeige
Das ist recht nervig, man kann das Problem aber umgehen. Die Lösung besteht darin, den Scrollbalken immer anzeigen zu lassen. Früher hab ich das mittels CSS immer so oder so ähnlich gelöst:
html {
height: 100.3%;
}Damit wird die Höhe der Seite einfach immer etwas größer als 100% festgelegt. Die Scrollleiste wird dauerhaft angezeigt, auch wenn der eigentliche Inhalt auch ohne Scrollleiste genug vertikalen Platz hätte. Das Problem an diesem Weg: Aufgrund der zusätzliche paar Pixel, die die Seite nun hat, ist es für den Benutzer möglich auch tatsächlich nach unten zu scrollen, obwohl „da unten“ eigentlich gar kein Inhalt mehr ist. Nicht ganz so schön.
Heute hab ich mich nach einer Alternative umgesehen und das CSS-Attribut overflow-y entdeckt. overflow-y ist Teil der der noch nicht fertigen CSS3-Spezifikation, wird aber schon seit vielen Jahren von allen gängigen Browsern unterstützt. Damit die vertikle Scrollleiste immer angezeigt wird, genügt folgender CSS-Befehl.
body {
overflow-y: scroll;
}Komisch, dass ich da nicht früher drauf gekommen bin. Das ist definitiv die elegantere Lösung und funktioniert problemlos, wie ich nach ein paar Tests mit verschiedenen Browsern feststellen konnte.
Anzeige
Ja, die Eigenschaft gibt es echt schon lange, kann mich nicht daran erinnern, dass die für mich mal neu war. Daher wundert es mich, dass du CSS 3 erwähnst. Sicher wird es da drin stehen, aber es wird doch sicher schon in 2 dabeigewesen sein, oder nicht?
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow
Ja, ist bereits Teil von CSS 2.
overflow: CSS2 – overflow-y, overflow-x: CSS3
http://www.css4you.de/overflow-y.html
Aber wie gesagt. Die Funktion ist so alt, dass man sie hätte kennen müssen :-).
Ist ja immer das Problem, wenn man was nicht kennt, was man „kennen müsste“. Diese Sachen sagt einem dann auch keiner.
Hat jemand eine Ahnung wie ich vermeiden kann, dass der IE bei diesem Attribut einen Doppelbalken rechts anzeigt?