很多人搜索css3vh，其实想了解的就是CSS里的vh视口高度单位。这里先说明一下，css3vh并不是一个独立的CSS3语法点，标准表达应是CSS中的vh视口高度单位。它常用于首屏模块、登录页、移动端全屏容器和需要随屏幕高度变化的布局，下面会结合具体代码说明常见写法、适用场景和移动端兼容方案。

在CSS布局中，vh是相对视口高度的长度单位，1vh等于当前浏览器可视区域高度的1%。元素设置为100vh时，理论上会占满整个视口高度，因此常被用于首屏横幅、欢迎页、全屏弹层和整屏容器。这里也要再次强调，用户常搜的css3vh，本质上指的是CSS里的vh单位，后文都按标准术语来说明。

• 1vh等于当前视口高度的1%
• 100vh通常表示占满一屏高度
• 标准说法是CSS中的vh视口高度单位，而不是独立的css3vh语法

vh最常见的用途是做整屏区域、高度自适应模块和垂直居中布局。和只讲概念不同，实际开发里更重要的是知道每种写法解决什么问题。下面几种写法最常用。示例1适合首屏固定一屏展示：

首屏内容

， .hero { height: 100vh; } ，它的作用是让模块始终等于当前视口高度。示例2适合内容多少不确定的页面：

...

， .page { min-height: 100vh; } ，这样内容少时至少占满一屏，内容多时页面可以继续向下撑开，不会因为写死高度而裁切。示例3适合登录页或欢迎页的垂直居中：

表单内容

， .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; } ，这里min-height: 100vh负责铺满视口，flex负责水平和垂直居中。示例4适合移动端全屏容器：

...

， .app-screen { min-height: 100vh; min-height: 100dvh; } ，前一行作为基础兼容，后一行在支持动态视口单位的浏览器里可优先使用更真实的可视高度。

• height: 100vh适合明确只占一屏的首屏区域
• min-height: 100vh适合内容高度可能继续增长的页面
• min-height: 100vh + flex常用于登录页、欢迎页、空状态页的垂直居中
• 移动端全屏容器可优先测试100dvh等新视口单位

这两个写法很像，但用途并不一样。height: 100vh会把元素高度固定为一整屏，适合视觉上就只想展示一屏内容的模块，比如首屏海报、启动页、引导页。如果内部内容变多，超出的部分可能溢出、被遮挡，或者需要额外设置滚动。min-height: 100vh则更适合正文页、表单页、结果页这类内容不确定的场景，因为它只规定最小高度是一屏，内容超出时容器还能继续变高。实际项目里，如果你不确定内容是否会增长，通常优先用min-height: 100vh更稳妥。还要区分100vh和100%：100vh参照的是浏览器视口高度，哪怕父元素没有高度也能生效；100%参照的是父元素高度，如果父级没明确高度，子元素的height: 100%往往不会得到你预期的一整屏效果。

• 只做固定首屏展示时优先考虑height: 100vh
• 内容可能超过一屏时优先考虑min-height: 100vh
• 100vh参考视口，100%参考父元素高度，这是两者最核心的区别

很多人遇到的问题不是vh不会用，而是移动端里100vh看起来比真实屏幕更高，或者地址栏收起、展开后高度跳动。这是因为一些移动浏览器计算传统vh时，会把浏览器界面区域也算进去，导致元素看起来超出可见区域。现在比较实用的方案有三类。第一类是新视口单位：100svh表示较稳定的小视口高度，适合希望页面在浏览器栏显示时也不抖动的场景；100dvh表示动态视口高度，适合希望容器跟随可视区域实时变化的场景；100lvh表示较大的视口高度，常用于需要覆盖最大显示区域的测试场景。第二类是兼容写法： .mobile-screen { min-height: 100vh; min-height: 100svh; min-height: 100dvh; } ，旧浏览器至少还能吃到100vh，新浏览器会采用后面更合适的单位。第三类是传统vh + JS方案，适合兼容要求高的移动端页面。HTML可以写成

，CSS写成 .mobile-full { min-height: calc(var(--vh, 1vh) * 100); } ，然后在脚本中根据真实可视高度写入变量： function setRealVh() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', ${vh}px); } setRealVh(); window.addEventListener('resize', setRealVh); 。这样页面会优先用脚本拿到的真实高度，能减轻地址栏变化带来的跳动问题。

• 100svh适合希望高度更稳定、减少跳动的页面
• 100dvh适合需要跟随真实可视区域动态变化的全屏容器
• 兼容要求高时可使用vh + CSS变量 + JS方案获取实际高度

问题1：为什么100vh有时会超出屏幕？现象通常是底部按钮被挡住，或者页面出现多余滚动。原因是部分移动浏览器对传统vh的计算并不完全等于当前真实可见区域。解决办法是优先尝试min-height: 100dvh或min-height: 100svh，兼容性要求高时再加上脚本变量方案。问题2：表单弹出键盘后页面布局乱了怎么办？常见原因是输入法弹出后可视区域变小，而固定height: 100vh的容器没有及时适配。更稳妥的做法是把表单页改成min-height而不是固定height，必要时监听resize更新--vh，让容器高度跟随变化。问题3：什么时候该用height，什么时候该用min-height？如果模块就是一个纯视觉首屏，内部内容固定，使用height: 100vh最直接；如果是注册页、订单页、文章页这类内容可能增多的场景，应优先使用min-height: 100vh或min-height: 100dvh。问题4：100vh和100%为什么看起来效果不同？因为100%依赖父元素高度，父级没设高度时往往无法撑满屏，而100vh直接参考浏览器视口，所以更适合做整屏布局。

• 出现超屏和底部遮挡时，先排查是不是传统100vh的移动端计算问题
• 表单和输入法场景优先使用min-height，比固定高度更稳
• 遇到兼容问题时，先用新视口单位，再补脚本方案，处理顺序更清晰

学习css3vh这个搜索词背后的知识点，关键其实是掌握CSS中的vh视口高度单位怎么在真实项目里落地。理解height与min-height的区别、100vh和100%的差异，以及100dvh、100svh和JS兼容方案的适用场景后，你在做首屏、登录页和移动端全屏布局时会更稳，也更容易快速定位问题。