Question

我网站的两个不同页面，结构相似，略微横向偏离彼此。当从一个页面导航到另一个页面时，这会在导航栏中造成刺耳的效果。

经过调查，我在Chrome Dev Tools CSS检查器中注意到每个页面的body标签宽度不同。

两个页面的结构相同，如下所示。班级.wrap的最大宽度为960px，所有内容都包含在.container .wrap中。

<body>
<?php
    require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">



</div>
<?php
  include 'footer.php';
?>
</body>

那么......什么可能导致身体标签的宽度不同？

Answer 1

垂直滚动条是原因。

body元素将在水平方向缩小以为滚动条添加一些空闲空间，因为浏览器窗口具有固定数量的水平空间。

<强>更新

如果要阻止此行为，可以使用：

body{
   overflow: hidden;
}

但您可能会丢失页面上浏览器的滚动功能。

Answer 2

添加以下CSS代码

html, body {
    height: 100%;
    overflow: hidden;
}

然后添加<div id="container-wrapper">以包装容器

将其CSS放置为

#container-wrapper {
    height: 100%;
    overflow-x: auto;
    position: absolute;
    width: 100%;
}

这将启用再次滚动