HTML与CSS调整窗口高度时内容丢失、滚动条无法显示全部内容问题

核心诱因 #

你遇到的滚动异常、内容截断问题完全来自全局高度与溢出规则的配置错误，具体可对应以下几点：

• 根节点高度设置错误：你给html/body或者最外层包裹容器设置了height: 100vh固定高度，该属性会强制容器高度等于当前视口高度，当实际内容总高度超过视口高度时，超出部分默认会被截断，不会自动撑开容器。
• 溢出规则配置错误：你给最外层容器加了overflow: hidden属性，直接禁用了全局滚动能力，仅内部局部元素有滚动配置，所以只能看到部分滚动条、无法滚动到内容底部。
• 自适应兜底缺失：开发时按375*1502的长屏参数调试，没有做短视口下的适配验证，短屏状态下内容高度超出视口时没有对应的滚动触发逻辑。

修复步骤 #

1. 将html、body节点的高度配置从固定的height: 100%/height: 100vh替换为min-height: 100vh，保证容器高度至少等于视口高度，内容超出时可以自动撑开。
2. 移除body或最外层包裹容器上的overflow: hidden配置，显式配置overflow-y: auto，确保内容超出时全局滚动条可以正常触发。
3. 检查内部内容容器的高度配置，不要写死和长屏匹配的固定高度，改为min-height或者自适应高度，避免内部内容溢出父容器。

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