Zentrierte Seiten müssen nicht Ruckeln

Es ist oft der Fall, dass man eine zentrierte Seite hat, die dann anfängt zu ruckeln, sobald der rechte Scroller erscheint, bzw verschwindet. Nur der IE ist so gebaut,  dass er den vertikalen Scroller bei nicht Bedarf ausgegraut lässt.

Eine Valide Lösung ist es im CSS den html Tag mit einer Höhe von 100% und einem padding-bottom von 1px zu stylen, so dass der scroller immer für einen Pixel Scrollen zur Verfügung steht, egal wie hoch der Content ist. Dem Firefox 2 konnte man noch sagen, dass der PaddingBottom nur 0.1px hoch ist, so dass da nix zu scrollen war. Seit FF3 hat sich das auch erledigt, wird gepflegt ignoriert.

Es gibt jedoch eine nicht so valide Lösung, obwohl es alle Browser verstehen und ich auch nicht begreife, warum es (noch) nicht Valide ist:
einfach statt padding-bottom: 1px;  ein overflow-y: scroll; einsetzen und schon hat man den Vertikalen scroller immer zur Verfügung.

Valide Lösung:

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

Nicht Valide Lösung, jedoch, viel schöner, da auch ausgegraut, wie beim IE:

html{
overflow-y: scroll;
}

Voilá

Euer Tomislav

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.