移动端调整页面大小时HTML元素高度未随内容增长溢出问题求解

核心诱因 #

• .areas容器设置了固定高度height: 100vh。该属性会强制容器高度等于当前设备视口高度，不会跟随内部内容高度自动调整。桌面端网格横向排列时，内容总高度未超过100vh，表现正常；移动端切换为纵向单列布局后，内容总高度远大于视口高度，固定高度限制直接导致内容溢出容器。
• 外层容器选择器拼写错误。你给<main>标签设置的class是wrapper，但CSS中对应的选择器写为.wraper（缺少字母p），导致你定义的外层flex纵向布局完全没有生效，也间接影响了整体高度的自适应逻辑。

修复方案 #

1. 将.areas的height: 100vh替换为min-height: 100vh，既可以保证桌面端容器至少占满全屏，内容超出时也能自动撑开高度。
2. 修正CSS中的选择器拼写错误，将.wraper改为.wrapper，让外层flex布局正常生效。

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