在移动端浏览器中，100vh 会包含底部工具栏的高度导致页面溢出，使用 tailwind css 的 h-[dvh:100] 类可以调用动态视口单位解决此问题。该方案利用 dvh 单位确保高度始终适配可视区域，避免被地址栏或工具栏遮挡。如果项目不支持最新的 tailwind 版本，可以使用 min-h-screen 配合 overflow-hidden 作为降级方案。
Tailwind 中如何使用 dvh 单位修复高度溢出？
直接使用 h-[dvh:100] 是处理该问题的标准做法。Tailwind 的任意值语法允许你传入 CSS 函数，这里传入 dvh:100 会生成 height: 100dvh;。这确保了元素高度等于当前动态视口高度，即不包含浏览器 UI 控件的区域。对于需要全屏覆盖的场景，这是最精确的选择。
/* tailwind.config.js */
module.exports = {
theme: {
extend: {},
},
plugins: [],
}
<div class="h-[dvh:100] bg-gray-100"> <!-- 内容 --> </div>
运行上述代码后，容器将严格贴合屏幕可视区域。在 iOS Safari 和 Android Chrome 上，滚动时高度不会随工具栏伸缩而跳动。若需限制最大高度防止内容过长，可结合 max-h-[dvh:100] 使用。
旧版 Tailwind 或无 dvh 支持时的替代方案是什么？
当无法使用 dvh 时，采用 min-h-screen 配合 overflow-y-auto 是常见的兼容策略。min-h-screen 基于 100vh，虽然可能略高于可视区，但通过允许内部滚动来避免布局破坏。这种方法牺牲了严格的“全屏”视觉效果，换取了广泛的兼容性。建议在根容器上使用，并配合 overscroll-none 消除滚动条样式。
<main class="container mx-auto p-4"><!-- 内容 --></main>
此方案下，页面高度至少为视口高度，多余内容可滚动。在低端安卓设备上表现稳定，不会出现高度计算错误导致的白边。注意检查父级是否设置了 height: 100%，这可能导致 min-h-screen 失效，此时需将 min-h-screen 应用于 html 或 body 标签。
使用 h-[dvh:100] 时如何防止子元素溢出？
在使用 h-[dvh:100] 的全屏容器中，子元素若设置 h-full 可能会继承 100% 高度导致双重缩放溢出。应确保子元素使用 overflow-hidden 或明确的高度约束。例如，侧边栏或模态框内部若包含长列表，需单独处理滚动区域，避免整体页面出现双滚动条。验证方法是在移动端模拟器中调整窗口大小，观察子元素是否超出边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
