罪魁祸首是 body 默认 margin 和 100vw 包含滚动条宽度：浏览器设 body margin: 8px 导致宽度超 100vw；100vw 在有垂直滚动条时计入其宽度，引发水平滚动条；应重置 html、body 并优先用 100% 或 fr 单位。

body 默认 margin 是罪魁祸首

浏览器给 body 设置了 margin: 8px，这是最常被忽略的源头。哪怕你写了 width: 100vw，实际渲染宽度是 100vw + 16px（左右各 8px），直接触发水平滚动条。这不是 bug，是规范行为。

验证方法很简单：在 DevTools 的 Styles 面板里临时加 body { margin: 0; }，滚动条立刻消失。

必须同步重置 html 和 body：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

100vw 包含垂直滚动条宽度

当页面内容过长、出现垂直滚动条时，100vw 在 Chrome/Firefox（Windows）中会把滚动条本身的宽度（通常 ~17px）算进“视口宽度”。结果就是：一个设了 width: 100vw 的 Grid 容器，实际比可用内容区还宽，硬生生挤出水平滚动条。

立即学习“前端免费学习笔记（深入）”；

典型场景：

• 全屏 banner 或 header 使用 100vw，但 body 已有垂直滚动条
• Grid 容器内嵌了未约束的 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 或长单词，又用了 &lt;code&gt;100vw&lt;/code&gt; 宽度&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;此时不要硬扛，优先换用 &lt;code&gt;width: 100%&lt;/code&gt; —— 它基于父容器内容区计算，天然避开滚动条占位干扰。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill8291&quot; title=&quot;page-agent 浏览器控制（CDP）&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179196125775037.jpg&quot; alt=&quot;page-agent 浏览器控制（CDP）&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill8291&quot; title=&quot;page-agent 浏览器控制（CDP）&quot;&gt;page-agent 浏览器控制（CDP）&lt;/a&gt; &lt;p&gt;使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill8291&quot; title=&quot;page-agent 浏览器控制（CDP）&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;H3&gt;Grid 子项 margin 撑开容器边界&lt;/H3&gt;&lt;p&gt;在 &lt;code&gt;display: grid&lt;/code&gt; 容器里，子元素的 &lt;code&gt;margin&lt;/code&gt; 不会像普通流那样被“截断”，而是实打实向外撑。尤其当子项是 &lt;code&gt;flex: 0 0 auto&lt;/code&gt; 或没设 &lt;code&gt;min-width: 0&lt;/code&gt; 时，一个 &lt;code&gt;margin-right: 20px&lt;/code&gt; 就能让整个 Grid 容器变宽。&lt;/p&gt;&lt;p&gt;排查建议：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;用 DevTools 的 Layout 面板看 Grid 容器的 “Actual width”，对比 “Computed width”&lt;/li&gt;&lt;li&gt;临时给所有直接子项加 &lt;code&gt;margin: 0 !important&lt;/code&gt;，观察滚动条是否消失&lt;/li&gt;&lt;li&gt;对可能溢出的子项（如文本块、图片）显式加 &lt;code&gt;min-width: 0&lt;/code&gt; 和 &lt;code&gt;overflow-wrap: break-word&lt;/code&gt;&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;gap 和 fr 单位能绕过多数陷阱&lt;/H3&gt;&lt;p&gt;如果你本意是让 Grid 行高按比例分配且填满视口，别用 &lt;code&gt;grid-template-rows: 30% 70%&lt;/code&gt; —— 百分比 + &lt;code&gt;gap&lt;/code&gt; 极易因浏览器计算差异导致总高度略微溢出，引发纵向滚动条。&lt;/p&gt;&lt;p&gt;改用 &lt;code&gt;fr&lt;/code&gt; 单位，它专为 Grid 设计，自动把 &lt;code&gt;gap&lt;/code&gt; 纳入剩余空间分配：&lt;/p&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;.grid-container { display: grid; grid-template-rows: 3fr 7fr; /* 总和为 10，自动按比例分剩余高度 */ gap: 12px; width: 100%; height: 100vh; /* 注意这里是 100vh，不是 100vw */ }</pre><p>关键点：<code>fr 不依赖父容器的百分比 height 计算，也不受 margin/gap 溢出逻辑影响，兼容性也好（Chrome 57+/Firefox 52+/Safari 10.1+）。

  真正难缠的，往往不是单位本身，而是你忘了重置 html 和 body 的默认 margin，或者在 Grid 里混用了 100vw 和子项的固定 margin —— 这两类问题加起来，占了生产环境水平滚动条的八成以上。