页面宽度缩小时出现空白区域，求原因及解决办法

• 元素溢出容器：如果section内的元素（比如图片、长文本、固定宽盒子）没做响应式适配，窄屏时宽度超出容器，会撑出横向空白。检查是否有元素设置了固定width（如width: 1200px）或min-width，这类属性会让元素无法随容器收缩。

• 全局样式未重置：浏览器默认给body、html等元素添加了margin/padding，比如body默认有8px左右的margin，直接导致页面边缘出现空白。在CSS开头添加全局重置代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box-sizing: border-box能让元素的内边距、边框纳入自身宽度计算，避免额外撑大容器。

• 缺失viewport配置：移动端页面如果没加viewport meta标签，会以桌面端宽度渲染，缩窄后必然出现空白。在HTML的<head>里补充：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 100vh的潜在问题：部分移动端浏览器（如Safari）的100vh会包含地址栏高度，导致页面实际高度超出视口，间接引发布局偏移。可以改用min-height: 100vh替代固定height: 100vh，避免强制高度带来的适配问题。

• 浮动元素未清除：若section内有浮动元素，未清除浮动会导致容器高度坍塌，也可能引发宽度计算异常。给section添加overflow: hidden，或者用伪元素清除浮动：

.section::after {
  content: "";
  display: table;
  clear: both;
}

如果能提供你的完整HTML和CSS代码，可以更精准定位具体问题。

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