网站通栏背景缩小后显示不全怎么办？快速解决技巧！

在做响应式布局时 很多人都会遇到这样一种尴尬：宽度100%的通栏背景在浏览器窗口被拉窄或在手机上预览时右侧突然出现一块空白，仿佛页面的灵魂被“割裂”。这不仅让用户产生视觉不适，还会直接影响SEO评分——搜索引擎喜欢完整、结构清晰的页面。

一、问题到底是怎么产生的？

弯道超车。 看似简单的width:100%背后 其实隐藏了两层逻辑：

• 视口宽度 vs 内容宽度：浏览器窗口缩小时width:100%只会占据当前视口的宽度。如果内部的正文区宽度超过视口，多余的部分会被推到视口右侧。
• 背景绘制范围：CSS 背景只会在对应元素实际占据的盒模型区域内绘制。当外层
  实际宽度被压到视口宽度，而内部内容已经超出，这部分超出的区域自然没有背景色。

举个例子：

当浏览器宽度降到1000px 时 .header仍然是100%，但.content仍占1200px。 一言难尽。 于是右侧多出来的200px 就没有任何背景填充。

为什么有时看不到滚动条却还能拖动？

很多同学抱怨“窗口缩小后出现空白，但滚动条好像消失了”。