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.

CSS inspector in Chrome Dev Tools shows body tag is 1349px wide CSS inspector in Chrome Dev Tools shows body tag is 1366px wide

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
thanks_in_advance 26 Dez. 2015 im 13:44

2 Antworten

Beste Antwort

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

1
user3896501 26 Dez. 2015 im 11:15

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.

1
Siyual 31 Dez. 2015 im 20:43