移动端网站底部出现多余空白问题排查：仅当网站宽度大于视口时触发

架构老林

2026-4-30

搞定移动端多余空白问题！

嘿，我一眼就揪出这个奇怪问题的根源了——你给html和body设置的width: fit-content就是罪魁祸首！

问题原因拆解

fit-content这个属性会让元素宽度收缩到刚好包裹内容的最小尺寸，但你的.myDiv宽度是2000px，远远超过了移动端的视口宽度。这就导致html和body被这个宽div硬生生撑开成了2000px的宽度。

而移动端浏览器的视口逻辑是：当页面总宽度超过视口时，会自动缩放页面来适配，但这个缩放机制和fit-content的宽度计算撞在一起，就产生了那个诡异的多余空白——你滚动到最右边时，会发现超出内容的空白区域，这是因为浏览器把html/body的2000px宽度当作了页面总宽度，但实际内容之外没有元素，就显示成了空白。

修复方案（两种可选）

方案1：移除多余的宽度设置（推荐）

块级元素默认宽度就是auto，会自动占满父容器（也就是视口），当内容超出时自然产生横向滚动条，不会出现空白。修改后的CSS：

*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; }
body { border: 2px dashed rebeccapurple; }
html, body { min-height: 100vh; /* 去掉width: fit-content即可 */ }
.myDiv { height: 2000px; width: 2000px; border: 2px dashed tomato; margin: 25px; }

方案2：保留fit-content但限制最大宽度

如果你的需求是让页面在内容较小时自动收缩宽度，内容大时随内容撑开，那可以给html/body加上max-width: 100%，避免超出视口导致的空白：

*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; }
body { border: 2px dashed rebeccapurple; }
html, body { min-height: 100vh; width: fit-content; max-width: 100%; }
.myDiv { height: 2000px; width: 2000px; border: 2px dashed tomato; margin: 25px; }