视口小于998px时右侧出现空白的CSS问题排查与解决

问题场景 #

HTML/CSS项目里已经配置了媒体查询，大部分响应式功能正常，但缩小屏幕到手机端尺寸时，页面右侧会出现空白区域，底部还会弹出横向滚动条。

试过的无效操作 #

• 添加overflow:hidden，结果破坏了粘性导航栏的功能
• 使用overflow:clip，完全没有效果

问题原因&解决办法 #

问题根源是CSS里给元素设置了固定宽度width:998px;。当浏览器窗口缩小时，媒体查询试图调整元素适配小屏，但固定宽度的div会超出当前视口范围，直接导致右侧出现空白和横向滚动条。只需移除这个固定宽度设置，改用相对宽度（比如width:100%），或者在对应媒体查询规则里覆盖该固定宽度，就能解决问题。

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