使用Tailwind CSS在header下添加section后出现水平滚动条如何解决

问题成因 #

你遇到的水平滚动条问题是w-screen类的经典坑：

• w-screen对应的CSS是width: 100vw，该属性取值为整个视口的宽度，包含垂直滚动条的占用宽度
• 仅开发header时页面高度刚好等于视口高度，没有垂直滚动条，所以w-screen宽度刚好匹配可用宽度，不会溢出
• 新增h-screen的section后，页面总高度为200vh，触发垂直滚动条，此时可用内容宽度 = 视口总宽度 - 垂直滚动条宽度，而header和section都是w-screen，宽度仍取视口总宽度，就会溢出滚动条宽度的部分，触发水平滚动条。

修复方案 #

你可以任选以下任意一种方案解决：

• 方案1（最便捷）：给<body>标签添加overflow-x-hidden类，直接屏蔽横向溢出的内容，不会影响正常布局
• 方案2（最规范）：删除header和section上的w-screen类，原生块级元素默认宽度为width: 100%，该属性基于父元素的可用内容宽度计算，会自动扣除垂直滚动条的宽度，不会出现溢出问题
• 方案3：如果需要保留w-screen，可以全局添加CSS规则 body { overflow-y: overlay; }，让垂直滚动条悬浮在内容上方不占用宽度，不过该属性兼容性略差，仅适合个人项目使用。

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