Eliminate „Sprünge“ bei horizontaler Zentrierung durch Erzwingen einer Scrollleiste

Sie kennen wahrscheinlich die Technik zum Zentrieren von Seiten, bei der zu einem äußeren Div automatische linke und rechte Ränder hinzugefügt werden.

#page-wrap {
  margin: 0 auto;
}

Einer der Nachteile dieser Technik ist, dass bei Websites mit mehreren Seiten das Layout beim Wechseln zwischen Seiten, die Scrollbalken erfordern, und Seiten, die dies nicht tun, leicht „springen“ kann. Dies liegt daran, dass die ~16 Pixel breite Scrollleiste im Browserfenster den Inhaltsbereich entsprechend verkleinert und sich die Wrap-Div darin neu zentriert, was zu dem Sprung führt.

Eine Möglichkeit, diesen Sprung zu vermeiden, besteht darin, auf jeder Seite Scrollbalken zu erzwingen, unabhängig davon, ob sie benötigt werden oder nicht. Dies mag einige Puristen verärgern, aber ich halte es für eine anständige Lösung.

Dies ist eine Möglichkeit, dies zu erreichen, die die Seite immer nur ein kleines bisschen höher als das Browserfenster macht und so eine rechte Scrollleiste erzwingt.

html {
  height: 100%;
  margin-bottom: 0.01em;
}

Das ist eine gute Idee, aber in Firefox scheint sie nicht zu funktionieren.

Hier ist eine Möglichkeit, nur die rechte Seitenleiste mit einem unschönen und semantisch falschen Hack zu erzwingen.

#scroll {
    position: absolute;
    top: 0;
    bottom: -0.1px;
    width: 1em;
    z-index: -1;
}

Fügen Sie dann einfach eine leere Div in Ihr HTML mit der ID „scroll“ ein. Wie gesagt, das ist eine ziemlich unschöne Art, es zu tun, hier ist ein viel saubererer Weg.

html {
  height: 102%;
}

Hier ist eine weitere Lösung, die effektiv sowohl horizontale als auch vertikale Scrollbalken erzwingt.

html {
  overflow: scroll;
}

Ein Beispiel dafür, wie dies funktioniert, sehen Sie in diesem Beispiel. Es wäre schön, wenn wir nur den vertikalen Scrollbalken bekommen könnten, indem wir overflow-y auf scroll setzen.aber auch das funktioniert wieder nicht in Firefox.UPDATE: Tatsächlich wurde mir das Licht gezeigt. Das Zuweisen von overflow-y zu scroll funktioniert und es funktioniert in Firefox, Safari und IE 6, und das macht es zur besten Lösung.

html {
  overflow-y: scroll; 
}