TailwindCSS中垂直滚动条触发水平滚动条问题求助

问题根源 #

你遇到的水平滚动条问题，本质是Chrome和Edge的垂直滚动条会占用页面宽度，而你给页脚用了w-screen类——这个类的宽度是屏幕可视区域宽度（不含滚动条）。当页面内容过长出现垂直滚动条时，页脚的实际宽度就会超出页面可用宽度（页面总宽度=屏幕宽度+滚动条宽度），从而触发水平滚动条。

Firefox和GNOME Web采用滚动条叠加在内容上的渲染方式，不会额外占用宽度，所以没有这个问题。

修复方案 #

方案1：替换w-screen为w-full #

把页脚的w-screen改成w-full，w-full会继承父元素（body）的宽度，而body会自动适配包含滚动条后的页面总宽度：

<footer class="w-full bg-gray-700 flex flex-col items-center text-gray-300 py-8 gap-4 px-10 md:px-4">
    <!-- 页脚内部内容保持不变 -->
</footer>

方案2：给页脚添加overflow-x-hidden #

如果需要保留w-screen，可以给页脚加上overflow-x-hidden，强制隐藏水平方向的溢出：

<footer class="w-screen bg-gray-700 flex flex-col items-center text-gray-300 py-8 gap-4 px-10 md:px-4 overflow-x-hidden">
    <!-- 页脚内部内容保持不变 -->
</footer>

方案3：全局设置隐藏水平溢出 #

在全局样式或body上添加overflow-x-hidden，彻底避免页面出现水平滚动条：

<body class="overflow-x-hidden">
    <!-- 页面内容 -->
</body>

验证效果 #

修改后重新加载页面，当内容超出屏幕高度出现垂直滚动条时，Chrome和Edge的水平滚动条就不会再出现了。

内容的提问来源于stack exchange，提问作者Jeroen