为什么CSS子元素使用100vh会导致盒模型超出移动端视口？-css教程-PHP中文网

100vh 固定于初始视口高度，不响应地址栏/键盘变化；box-sizing: content-box 下 padding/border 会额外增加高度；应使用 min-height: 100dvh 配合 @supports 降级，并控制 flex-shrink 和 overflow-y。

为什么css子元素使用100vh会导致盒模型超出移动端视口？

100vh 基于布局视口，不是你看到的那块屏幕

它算的是包含地址栏、底部导航栏在内的“理论最大高度”，而用户滚动或键盘弹出时，真正能操作的视觉区域（visual viewport）会实时变化。但 100vh 的像素值在页面加载那一刻就冻结了，后续工具栏收起 → 实际可视区变大，100vh 却没变 → 元素撑不满；键盘弹出 → 可视区变小，100vh 还是那个大值 → 内容被顶出或底部留白。

盒模型叠加让溢出更隐蔽

默认 box-sizing: content-box 下，min-height: 100vh 只管内容区高度，padding 和 border 会额外加高。比如：

.modal {
  min-height: 100vh;
  padding: 24px;
}

实际总高度 = 100vh + 48px，哪怕视口刚好 800px，它也变成 848px，必然触发滚动条。这不是 bug，是盒模型按规范执行的结果。

别直接用 height: 100dvh，这是常见误操作

100dvh 是动态单位，但它只适合做最小约束，不是强制占满：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

❌ height: 100dvh：内容超长时会被硬裁剪，用户滑不到底部表单或按钮
✅ min-height: 100dvh + max-height: 100dvh + overflow-y: auto：既响应键盘/滚动，又保内容可访问
⚠️ 父容器必须有明确高度上下文，否则 flex 容器里 min-height: 100dvh 可能不生效

@supports 不是可选项，是保命线

iOS 15、微信 X5 内核等旧环境遇到 100dvh 会直接忽略整条声明，导致弹窗塌陷为 0 高度。降级必须写在 @supports 外层：

.dialog {
  min-height: 100vh;
}
@supports (min-height: 100dvh) {
  .dialog {
    min-height: 100dvh;
  }
}

别写成 min-height: 100vh; min-height: 100dvh —— 老浏览器解析到第一个就停，第二个压根不读。

真正难处理的不是单位本身，而是当 100dvh 生效后，flex 子项仍可能被压缩——比如键盘弹起时输入框被顶走，这需要单独控制 flex-shrink: 0 和 overflow-y 分层约束。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！