网页缩放时响应式布局失效 文本溢出、底部留白问题求助

核心问题定位 #

• 页面缩放时文本溢出视口边界，无法自动换行
• 页面底部内容溢出，视口底部出现非预期白色间隙

分步修复代码 #

1. 全局基础规则修复（解决90%以上溢出问题） #

先在CSS最顶部重置全局盒模型与基础排版规则，浏览器默认的盒模型、默认边距是大部分溢出问题的根源：

/* 统一所有元素盒模型，padding、border不会撑大容器宽度 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  /* 禁止页面横向溢出 */
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  /* 长文本、长单词强制折行，避免文本溢出 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

2. 固定宽度元素适配 #

所有写死固定width: xxxpx的容器（包括表单卡片、文本块、侧边栏），替换为响应式宽度规则：

/* 替换原固定宽度容器的样式 */
.form-container {
  /* 小屏下占视口90%宽度，两侧留自然边距 */
  width: 90%;
  /* 大屏下最大宽度不超过设计稿尺寸，避免元素过宽 */
  max-width: 1000px; /* 按实际设计稿尺寸调整即可 */
  margin: 0 auto;
}

所有表单输入框、按钮设置宽度跟随父容器，避免撑破布局：

input, button {
  width: 100%;
  max-width: 100%;
}

3. 底部白色间隙修复 #

如果页面采用flex做整体垂直排版，给根容器添加以下规则，让内容区自动撑满剩余高度，底部自然贴齐视口下边缘，不会留空白：

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-area {
  /* 自动占满中间剩余空间 */
  flex: 1;
}

如果没有用flex布局，检查底部区域是否存在脱离文档流的定位（绝对定位、固定定位），如果有，给父元素添加对应高度的padding-bottom，预留出底部元素的空间，避免内容溢出导致的空白。 #

排查技巧 #

修改完基础规则后如果仍有溢出，可以打开浏览器开发者工具，在元素面板逐个选中可疑元素，查看右侧盒模型面板，找到宽度超出视口的元素，针对性调整其宽度、边距规则即可。
备注：当前实现为模型设计稿，并非真实可用表单；目前页面元素尺寸偏大的问题，后续可通过媒体查询针对不同屏幕断点调整字号、间距、元素尺寸，不影响本次溢出问题的修复。

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