当网页内容超出视口高度却无法滚动时，通常是因为容器高度被限制且未正确设置溢出行为；通过为主要内容容器设置 height: 100vh 并启用 overflow: auto，即可恢复自然滚动功能。
当网页内容超出视口高度却无法滚动时，通常是因为容器高度被限制且未正确设置溢出行为；通过为主要内容容器设置 height: 100vh 并启用 overflow: auto，即可恢复自然滚动功能。
在实际开发中，网页“无法滚动”是一个高频但易被忽视的布局问题。其根本原因往往不是浏览器或设备异常，而是 CSS 中对容器尺寸和溢出行为的不当约束。典型场景是：页面包含一张全屏高度的图片（如 <header> 或 <section> 使用 height: 100vh），随后紧跟大量正文内容，但整个 <main> 或 <body> 的父容器未预留足够空间或未允许内容溢出，导致后续内容被裁剪、滚动条消失。
要解决该问题，关键在于确保承载全部内容的主容器具备可滚动的上下文。仅对 <body> 或 <html> 设置 overflow: auto 通常无效（因浏览器默认已处理），更可靠的做法是明确控制语义化容器（如 <main>）的行为：
main {
width: 100%;
height: 100vh; /* 初始视口高度，保证基础布局 */
overflow-y: auto; /* 仅在内容超长时启用垂直滚动（推荐比 'auto' 更精确） */
-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度（可选） */
}⚠️ 重要注意事项：
- 避免对 <html> 或 <body> 同时设置 height: 100% + overflow: hidden —— 这会直接禁用全局滚动；
- 若使用 Flexbox 布局（如 display: flex; flex-direction: column），需确认父容器未设置 flex-shrink: 0 或固定高度，否则子元素可能被压缩而非触发滚动；
- 检查是否存在 position: fixed/absolute 元素意外脱离文档流，导致高度计算失效；
- 在移动端，务必添加 <meta name="viewport" content="width=device-width, initial-scale=1">，否则 100vh 可能因地址栏缩放而失准。
✅ 验证步骤：
- 打开浏览器开发者工具 → “Elements” 面板；
- 选中 <main>（或你用于包裹内容的容器）→ 查看右侧 “Computed” 标签页中的 height 和 overflow 实际值；
- 临时添加 border: 2px solid red 边框，直观确认容器是否真正包裹了全部内容。
通过精准控制容器的高度与溢出策略，而非依赖全局样式或猜测性调试，可稳定解决“文字在图下却不滚动”的问题，并提升跨设备兼容性。
