零基础入门 CSS vh 单位的使用场景

用好 CSS 的vh单位，让网页真正“贴满屏幕”

你有没有遇到过这样的问题：明明写了height: 100%，但元素就是没法填满整个屏幕？或者在手机上打开页面时，底部突然冒出一片白边，像是被“砍掉了一截”？

这类布局难题，在现代前端开发中其实早已有了优雅的解法 —— 使用vh这个 CSS 单位。

别被名字吓到，它并不复杂。哪怕你是刚接触 CSS 的新手，只要理解了“视口”这个概念，就能立刻上手使用vh，轻松实现全屏展示、动态字体、平滑滚动等常见需求。

今天我们就来彻底讲清楚：vh到底是什么？为什么它比px和%更适合响应式设计？以及在真实项目中该怎么用、有哪些坑要避开。

一、什么是vh？从一个简单的例子说起

假设你想做一个登录页，要求背景颜色占满整个屏幕，中间放一个表单。你会怎么写？

很多人第一反应是：

.container { height: 100%; background: #007bff; }

但你会发现——这根本没用！因为%是相对于父元素的高度，而如果父级没有明确高度，100%就等于 0。

于是你可能开始一层层往上设高度，甚至去改html和body：

html, body { height: 100%; }

烦不烦？累不累？

现在换种方式，只加一行代码：

.container { height: 100vh; /* 视口高度的 100% */ background: #007bff; }

搞定。不管页面结构多深，这个容器都会老老实实填满当前屏幕可视区域。

✅1vh = 浏览器可视窗口高度的 1%
比如你的屏幕高 900px，那么1vh = 9px，50vh = 450px。

这就是vh的核心价值：它不依赖父元素，直接绑定用户的“看到的部分”。

二、除了vh，还有哪些视口单位？

CSS 提供了一组以“视口”为基础的相对单位，它们都属于Viewport Units：

举个例子：
- 手机竖屏：375×812px →1vh ≈ 8.12px,1vw = 3.75px
- 横屏翻转后：812×375px →1vh ≈ 3.75px,1vw = 8.12px

所以如果你希望某个元素始终适应“短边”，可以用vmin；想撑满最长方向就用vmax。

但在大多数场景下，我们最常用的就是vh和vw。

三、vh能做什么？这些实战场景你一定用得上

场景 1：真正的全屏区域

无论是首页 Banner、活动页主视觉，还是登录注册页，经常需要一个“一眼到底”的视觉区块。

.hero-section { height: 100vh; background: url('/bg.jpg') center/cover; display: flex; align-items: center; justify-content: center; color: white; text-align: center; }

✅ 效果：无论用户是在 iPhone 小屏还是 27 寸显示器上浏览，这块区域都能完美贴合屏幕高度。

💡 小技巧：配合 Flex 布局居中内容，体验更佳。

场景 2：字体也能“随屏缩放”

传统做法中，字体大小通常是固定的（如16px或1rem），但在不同设备上阅读体验差异很大。

用vh可以让标题文字随着屏幕尺寸自动调整：

.page-title { font-size: 6vh; /* 字体大小为视口高度的 6% */ }

这意味着：
- 在 iPad 上，字体会更大，更有冲击力；
- 在手机上，也不会因为固定大字号导致溢出或换行混乱。

当然，不能无脑放大。我们后面会讲如何用clamp()控制上下限。

场景 3：打造 PPT 式整屏滚动页面

很多 H5 活动页、产品介绍页采用“一屏一页”的交互模式。每滑一下，刚好切换到下一屏。

这只需要结合scroll-snap和100vh就能实现：

<div class="page">第一屏</div> <div class="page">第二屏</div> <div class="page">第三屏</div>

.page { height: 100vh; scroll-snap-align: start; /* 锁定滚动起点 */ } body { margin: 0; overflow-y: auto; scroll-snap-type: y mandatory; /* 纵向强制吸附 */ height: 100vh; }

✅ 用户滚动时，浏览器会自动将每一屏“吸”到位，无需 JavaScript 监听事件。

🎯 应用广泛：营销页、作品集、数据看板、Web 游戏菜单等。

四、那些官方文档不会告诉你的“坑”

听起来很美好对吧？但现实总是有点小麻烦，尤其是在移动端。

陷阱 1：Safari 里100vh并不等于“实际可见高度”

你在 iOS Safari 或微信内置浏览器中可能会发现：设置了height: 100vh的元素，竟然超出了屏幕，还触发了不必要的滚动条！

原因在于：某些浏览器在计算vh时，把地址栏、工具栏也算进去了，导致100vh实际大于用户真正能看到的高度。

解决方案一：使用dvh（dynamic viewport height）

CSS 新增了一个更智能的单位叫dvh，它可以感知浏览器 UI 的展开/隐藏状态：

.fixed-height { height: 100dvh; }

这样即使地址栏收起，内容也不会被裁剪。

⚠️ 注意：目前dvh在部分旧浏览器中支持不佳（Can I Use 数据显示约 85% 支持率）。上线前需测试兼容性。

解决方案二：降级处理 + JS 补丁

对于不支持dvh的环境，可以先用100%高度，再通过 JS 动态设置：

document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');

然后在 CSS 中使用：

.container { height: calc(100 * var(--vh)); /* 100vh 的模拟 */ }

这样就能获得准确的可视高度。

陷阱 2：折叠屏手机上，8vh的字体变成“巨无霸”

想象一下：用户把折叠屏手机展开，屏幕高度瞬间从 800px 变成 1600px。如果你写了：

.title { font-size: 8vh; } /* 展开后变成 128px！ */

结果标题大得离谱，挤占了其他内容空间。

解决方案：用clamp()给vh加个“安全围栏”

.title { font-size: clamp(1.5rem, 8vh, 4rem); }

解释一下：
- 最小值：1.5rem（约 24px），防止太小看不清
- 理想值：8vh，正常情况下随屏幕变化
- 最大值：4rem（约 64px），避免过大失控

✅ 这样既保留了响应式优势，又防止极端情况破坏布局。

五、最佳实践建议：别滥用，但也别错过

虽然vh很强大，但它不是万能药。以下是我们在项目中总结的经验：

✅ 推荐使用场景

• 全屏布局模块（首屏、弹窗背景、加载页）
• 需要与视口强关联的动效偏移（如视差滚动）
• 响应式排版中的辅助调节（配合clamp()）

❌ 不推荐使用场景

• 普通段落文本或按钮高度（容易失控）
• 嵌套容器内的子元素高度控制（此时应优先考虑flex或grid）
• 需要精确像素控制的 UI 组件（如图标、分割线）

🛠️ 推荐组合拳

.component { height: clamp(400px, 80vh, 1000px); /* 安全范围内的自适应高度 */ font-size: clamp(1rem, 4vh, 2.5rem); padding: 5vh 10vw; }

这种写法兼顾了灵活性与稳定性，是现代 CSS 响应式的理想范式。

六、它是怎么工作的？底层机制揭秘

当你写下height: 100vh，浏览器做了什么？

1. 页面加载时，获取当前viewport 可视区域高度
2. 将其除以 100，得到1vh的像素值
3. 所有包含vh的样式属性据此计算并渲染
4. 当窗口大小改变（旋转、缩放、弹出键盘），浏览器重新计算vh并触发重绘

整个过程完全由浏览器原生完成，不需要任何 JavaScript 参与，性能极高。

这也意味着你可以放心地把它用于动画和滚动交互，不用担心频繁监听resize事件带来的性能损耗。

写在最后：从100vh开始，走向专业的响应式思维

掌握vh并不只是学会了一个单位，更是建立起一种新的布局思维方式 ——
不再依赖固定数值，而是让 UI 主动适配用户的设备环境。

未来，随着更多精细化视口单位的出现（如svh、lvh、dvh），我们将能更精准地区分“小屏幕”、“大屏幕”、“动态UI遮挡”等情境，做出更智能的界面响应。

但对于现在的你来说，记住这一点就够了：

🔹100vh = 当前你能看到的屏幕高度
下次做全屏布局时，试试它，你会发现，原来响应式可以这么简单。

如果你正在做一个移动端页面却被底部留白困扰，不妨在评论区贴出你的代码，我们一起看看是不是vh的问题？欢迎交流！