当网页内容超出视口高度却无法滚动时，通常是因为容器高度被限制且未正确设置溢出行为；通过为主要内容容器设置 height: 100vh 并启用 overflow: auto，即可恢复自然滚动功能。

当网页内容超出视口高度却无法滚动时，通常是因为容器高度被限制且未正确设置溢出行为；通过为主要内容容器设置 height: 100vh 并启用 overflow: auto，即可恢复自然滚动功能。

在实际开发中，网页“无法滚动”是一个高频但易被忽视的布局问题。其根本原因往往不是浏览器或设备异常，而是 CSS 中对容器尺寸和溢出行为的不当约束。典型场景是：页面包含一张全屏高度的图片（如

或

使用 height: 100vh），随后紧跟大量正文内容，但整个

或 的父容器未预留足够空间或未允许内容溢出，导致后续内容被裁剪、滚动条消失。

要解决该问题，关键在于确保承载全部内容的主容器具备可滚动的上下文。仅对

或 设置 overflow: auto 通常无效（因浏览器默认已处理），更可靠的做法是明确控制语义化容器（如

）的行为：

main {
  width: 100%;
  height: 100vh;     /* 初始视口高度，保证基础布局 */
  overflow-y: auto;  /* 仅在内容超长时启用垂直滚动（推荐比 'auto' 更精确） */
  -webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度（可选） */
}

⚠️ 重要注意事项：

• 避免对 或 同时设置 height: 100% + overflow: hidden —— 这会直接禁用全局滚动；
• 若使用 Flexbox 布局（如 display: flex; flex-direction: column），需确认父容器未设置 flex-shrink: 0 或固定高度，否则子元素可能被压缩而非触发滚动；
• 检查是否存在 position: fixed/absolute 元素意外脱离文档流，导致高度计算失效；
• 在移动端，务必添加 ，否则 100vh 可能因地址栏缩放而失准。

✅ 验证步骤：

1. 打开浏览器开发者工具 → “Elements” 面板；
2. 选中
   （或你用于包裹内容的容器）→ 查看右侧 “Computed” 标签页中的 height 和 overflow 实际值；
3. 临时添加 border: 2px solid red 边框，直观确认容器是否真正包裹了全部内容。

通过精准控制容器的高度与溢出策略，而非依赖全局样式或猜测性调试，可稳定解决“文字在图下却不滚动”的问题，并提升跨设备兼容性。