用好 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：
| 单位 | 含义 |
|---|---|
vw | 视口宽度的 1%，100vw = 当前屏幕宽度 |
vh | 视口高度的 1%，100vh = 当前屏幕高度 |
vmin | vw和vh中较小的那个值的 1%（比如竖屏时是vw） |
vmax | vw和vh中较大的那个值的 1% |
举个例子：
- 手机竖屏：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，浏览器做了什么？
- 页面加载时，获取当前viewport 可视区域高度
- 将其除以 100，得到
1vh的像素值 - 所有包含
vh的样式属性据此计算并渲染 - 当窗口大小改变（旋转、缩放、弹出键盘），浏览器重新计算
vh并触发重绘
整个过程完全由浏览器原生完成，不需要任何 JavaScript 参与，性能极高。
这也意味着你可以放心地把它用于动画和滚动交互，不用担心频繁监听resize事件带来的性能损耗。
写在最后：从100vh开始，走向专业的响应式思维
掌握vh并不只是学会了一个单位，更是建立起一种新的布局思维方式 ——
不再依赖固定数值，而是让 UI 主动适配用户的设备环境。
未来，随着更多精细化视口单位的出现（如svh、lvh、dvh），我们将能更精准地区分“小屏幕”、“大屏幕”、“动态UI遮挡”等情境，做出更智能的界面响应。
但对于现在的你来说，记住这一点就够了：
🔹
100vh = 当前你能看到的屏幕高度
下次做全屏布局时，试试它，你会发现，原来响应式可以这么简单。
如果你正在做一个移动端页面却被底部留白困扰，不妨在评论区贴出你的代码，我们一起看看是不是vh的问题？欢迎交流！
