h-screen 不全屏因基于初始视口高度且不响应动态变化，易被父容器截断或遮挡；应改用 min-h-[100dvh] 以适配移动端地址栏显隐并兼容旧环境。
h-screen 类为什么有时不全屏？
因为 h-screen 是基于浏览器视口（viewport）的初始高度计算的，不是动态响应滚动或缩放变化的。如果父容器有 overflow: hidden、transform 或设置了 height，它可能被截断；更常见的是页面存在顶部固定导航栏但没预留空间，导致内容被遮挡。
- 检查是否在
外层意外加了带height或max-height的 wrapper 元素 - 确保没有祖先元素触发了新的 BFC（比如
transform: translateZ(0)），这会让h-screen相对于该容器而非视口计算 - 移动端 Safari 中，地址栏收起/展开会改变
vh值，而h-screen不随之更新——此时需改用min-h-[100dvh]（见下一条）
用 min-h-[100dvh] 替代 h-screen 的实际场景
dvh（dynamic viewport height）是 CSS 新单位，能响应移动端地址栏显隐变化，比 vh 和 h-screen 更可靠。Tailwind 3.3+ 默认支持，但需确认你用的是较新版本（否则会报 class does not exist 错误）。
- 替换写法：
h-screen→min-h-[100dvh]，避免因地址栏收缩导致底部留白 - 不要只用
h-[100dvh]，因为某些安卓 WebView 对dvh支持不稳定，min-h能兜底回退到内容撑高 - 若项目需兼容旧版 Tailwind（tailwind.config.js 的
theme.extend.spacing中添加'100dvh': '100dvh'，再用h-[100dvh]
全屏组件内滚动失效的典型表现与修复
给一个全屏容器加了 h-screen 或 min-h-[100dvh] 后，内部子元素设了 overflow-y-auto 却无法滚动——根本原因是父容器没设 flex-col 或 flex，且未明确高度约束，导致子元素的“可用高度”为 0。
- 必须确保全屏容器是 Flex 布局：加
flex flex-col，再对需要滚动的区域加flex-1 overflow-y-auto - 别依赖
h-full向下传递高度：它只在父元素有明确高度时才生效，而h-screen的父元素（如）通常没设height - 示例结构：
<div class="h-screen flex flex-col"> <header class="h-16"></header><main class="flex-1 overflow-y-auto"></main> </div>
和 position: fixed 搭配时的冲突点
想让某个元素“全屏覆盖 + 固定定位”，比如模态框或加载遮罩，直接套 h-screen w-screen fixed 看似合理，但容易忽略两个细节：一是 z-index 层级没设够，二是 top: 0; left: 0 缺失导致定位偏移。
-
fixed元素脱离文档流，h-screen在这里只是设置尺寸，不参与定位，必须显式写top-0 left-0 - 移动端键盘弹出时，
fixed元素可能被顶出视口，此时min-h-[100dvh]仍有效，但需配合inset-0（等价于top-0 right-0 bottom-0 left-0）保证贴边 - 避免用
h-full配合fixed：它会相对于最近的定位祖先计算，而非视口，结果不可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
