Ich verwende Skeleton CSS Boilerplate
Zwei verschiedene Seiten meiner Website, ähnlich strukturiert, sind seitlich leicht voneinander weg verschoben. Dies führt zu einem Erschütterungseffekt in der Navigationsleiste, wenn Sie von einer Seite zur anderen navigieren.
Bei der Untersuchung stellte ich im CSS-Inspektor von Chrome Dev Tools fest, dass das Body-Tag jeder Seite eine andere Breite hat.
Die Struktur beider Seiten ist dieselbe (siehe unten). Die Klasse .wrap hat eine maximale Breite von 960 Pixel und der gesamte Inhalt ist in .container .wrap enthalten.
<body>
<?php
require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">
</div>
<?php
include 'footer.php';
?>
</body>
Also ... was könnte dazu führen, dass die Body-Tags unterschiedlich breit sind?
2 Antworten
Fügen Sie den folgenden CSS-Code hinzu
html, body {
height: 100%;
overflow: hidden;
}
Fügen Sie dann ein <div id="container-wrapper"> hinzu, um den Container zu verpacken
Platzieren Sie seine CSS wie
#container-wrapper {
height: 100%;
overflow-x: auto;
position: absolute;
width: 100%;
}
Dadurch wird das Scrollen wieder aktiviert
Die vertikale Bildlaufleiste ist die Ursache.
Das Körperelement wird in horizontaler Richtung verkleinert, um freien Platz für die Bildlaufleiste hinzuzufügen, da das Browserfenster einen festen horizontalen Platz hat.
UPDATE
Wenn Sie dieses Verhalten verhindern möchten, können Sie Folgendes verwenden:
body{
overflow: hidden;
}
Möglicherweise verlieren Sie jedoch die Bildlauffunktion Ihres Browsers auf der Seite.