横屏切换时布局塌陷通常是因为视口高度（vh）在移动端浏览器地址栏动画期间发生跳变，导致使用固定高度的容器被压缩。解决这一问题的核心做法是强制页面根元素占满整个可用空间，并让内容区域通过 flexbox 或 grid 布局自适应剩余高度，从而避免内部元素因父级高度突变而重叠或消失。
为什么 vh 单位会导致高度塌陷
在 iOS Safari 和 Android Chrome 中，当用户从竖屏切换到横屏时，浏览器的工具栏会展开或收起，这会导致可视区域的高度（Visual Viewport Height）发生动态变化。如果 CSS 中使用了 height: 100vh，它获取的是包含隐藏区域的总高度，或者在动画过程中未能及时更新，导致实际渲染高度小于预期，进而使内部绝对定位或固定定位的元素失去参照系而发生塌陷。
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100dvh; /* 使用 dynamic viewport height */
width: 100%;
}
.content {
flex: 1;
overflow-y: auto;
}
上述代码中，100dvh 是 CSS 新增的动态视口单位，它能实时响应地址栏的变化。配合 Flex 布局，.content 区域会自动填充剩余空间，即使父容器高度短暂波动，子元素也不会因为高度计算错误而堆叠在一起。对于不支持 dvh 的旧版浏览器，可以使用 100vh 配合 JavaScript 监听 resize 事件进行补偿，但现代开发首选 dvh。
Flex 布局如何防止内容溢出
当页面结构复杂时，单纯依赖视口单位可能不足以解决所有塌陷问题，特别是当内部存在滚动条或固定头部时。通过设置 display: flex 和 flex-direction: column，可以建立一个垂直弹性盒模型。关键是将主体内容区域设置为 flex: 1，这样无论外部容器高度如何变化，内容区都会自动占据所有可用空间，而不是被内容撑开或压缩。
<div class="app"> <header>Header</header><main class="scroll-area"><p>Long content...</p> </main> </div>
在 HTML 结构中，header 保持自然高度，main 作为滚动容器。CSS 需确保 .app 高度为 100dvh，.scroll-area 设置 overflow-y: auto。这种结构下，横屏切换时，只有 .scroll-area 的高度会随视口调整，而 header 始终固定在顶部，不会发生位置错乱或覆盖内容。若发现仍有塌陷，检查是否在内层元素上设置了固定的 height 而非 max-height，固定高度会破坏弹性布局的自适应能力。
特定条件下滚动条导致的视觉错位
在某些 Android 设备上，横屏切换后可能会出现水平滚动条或垂直滚动条宽度不一致导致的视觉错位。这是因为滚动条的出现会占用 box-sizing: border-box 之外的空间，或者触发重绘导致布局偏移。解决此问题需要在 CSS 中显式处理滚动条样式，并确保所有容器使用 box-sizing: border-box。
* {
box-sizing: border-box;
}
.scroll-area::-webkit-scrollbar {
width: 0px;
background: transparent;
}
通过隐藏滚动条或使用自定义滚动条样式，可以减少因滚动条宽度变化引起的布局抖动。同时，确保 html 和 body 没有默认的 margin，避免因边距叠加导致的额外空间占用。在实际测试中，若切换方向后底部出现空白，通常是 min-height 未正确应用所致，此时应检查 .container 是否继承了正确的视口高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
