视口单位

约 305 字大约 1 分钟

2026-05-13

思考

vh（传统单位）

参考：初始视口高度（通常是最大视口，但不完全等于 lvh，历史实现略有差异，现代浏览器更倾向于等价于 lvh）。

问题：在移动端，当滚动页面导致地址栏隐藏/显示时，100vh 不会变化，导致元素在工具栏收起时被截断或留白。

/* 问题示例：全屏元素在工具栏变化时可能溢出或产生滚动条 */
.fullscreen {
  height: 100vh;
}

参考：视口最大可能高度（即浏览器 UI 完全收缩后的高度）。

特点：固定值，适合布局不依赖动态变化，希望占据整个屏幕（无工具栏遮挡）的场景。

参考：当前实时视口高度（工具栏展开/收起时，值立即更新）。

特点：值会变化，元素会随之重新布局。适合需要严格覆盖当前可视区域的元素（如全屏弹窗、移动端全屏组件）。

/* 会随着工具栏切换而实时调整高度 */
.fullscreen-dynamic {
  height: 100dvh;
}