是什么导致 body 标签变宽？

Question

我网站的两个不同页面，结构相似，彼此略微横向偏移。当从一个页面导航到另一个页面时，这会导致导航栏中出现不和谐的效果。

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

两个页面的结构是一样的，如下图。 class .wrap 的最大宽度为 960px，所有内容都包含在 .container .wrap.

内

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



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

那么...是什么导致正文标签宽度不同？

Answer 1

垂直滚动条是原因。

body 元素将在水平方向收缩以添加一些免费的滚动条 space，因为浏览器 window 具有固定数量的水平 space。

更新

如果你想阻止这种行为，你可以使用：

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%;
}

这将再次启用滚动

What's causing the body tag to widen?