如何用 CSSvh实现真正全屏布局？别再被滚动条坑了！
你有没有遇到过这种情况：明明写了height: 100%，结果元素就是填不满屏幕；或者在手机上调试时，页面底部莫名其妙留了一截空白，怎么都去不掉？
如果你正在做登录页、引导页、活动页这类需要“一屏到底”的视觉效果，那今天这篇文章可能会帮你彻底解决这些顽固问题。
我们不讲虚的，直接上干货——用vh单位实现真正意义上的全屏布局。它简单、高效、跨设备适配能力强，是现代前端开发中不可或缺的基础技能之一。
为什么100%高度不管用？
先来搞清楚一个经典误区：
很多人以为给一个 div 设置height: 100%就能让它占满整个屏幕，但往往失败了还不知道原因。
问题出在哪？
因为百分比高度是相对于父元素计算的，而默认情况下，html和body并没有明确的高度值。也就是说：
.full { height: 100%; /* 父级没高度 → 100% 是多少？浏览器：我也不知道 */ }即使你一层层往上设置height: 100%，也容易遗漏或受 margin/padding 影响，最终还是不能精准填满视口。
这时候，就需要跳出文档流的束缚，转向更底层的单位 ——视口（viewport）相关单位。
vh到底是什么？一句话说清
vh全称是viewport height，意思是“视口高度的 1%”。
所以：
-1vh = 1% × 当前可视窗口的高度
-100vh = 整个浏览器可视区域的高度
举个例子：你的手机屏幕可视区高 640px，那么50vh就等于320px。
最关键的一点是：vh不依赖父元素，也不看文档内容，只认浏览器窗口本身。这使得它成为实现“真·全屏”最可靠的工具。
.hero-section { height: 100vh; background: #0d1b2a; color: white; display: flex; align-items: center; justify-content: center; }加上这段 CSS，不管你页面有没有内容，这个区块都会稳稳地撑满从顶部到底部的所有可视空间。
实战案例：做一个三屏滚动的宣传页
假设我们要做一个移动端 H5 活动页，包含三个部分：首页、关于我们、联系方式，每一页都要刚好一屏。
HTML 结构如下：
<nav>品牌LOGO</nav> <section class="screen home">首页 · 欢迎来到未来</section> <section class="screen about">关于我们 · 改变世界</section> <section class="screen contact">联系我们 · 立即加入</section>对应的 CSS：
* { margin: 0; padding: 0; box-sizing: border-box; } nav { position: fixed; top: 0; width: 100%; height: 60px; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; color: white; } .screen { width: 100%; height: 100vh; /* 关键！每一屏都是一整个视口高 */ display: flex; align-items: center; justify-content: center; font-size: 2rem; text-align: center; } .home { background: linear-gradient(135deg, #667eea, #764ba2); } .about { background: linear-gradient(135deg, #f093fb, #f5576c); } .contact { background: linear-gradient(135deg, #4facfe, #00f2fe); margin-top: 60px; /* 给导航栏腾出位置 */ }就这么几行代码，我们就实现了：
- 每个 section 正好占满一屏；
- 导航栏固定在顶部；
- 内容垂直居中；
- 所有设备自动适配。
是不是比写一堆 JS 计算高度清爽多了？
进阶技巧：避开头部遮挡 + 动态适配
你以为这就完了？还有两个真实项目中最常见的“坑”，必须提前预防。
坑一：iPhone 上100vh居然不够长！
你在 Safari 里打开页面，发现最后一行字被切掉了，或者滚动条轻轻一碰就出来了……这是老生常谈的问题。
原因：iOS Safari 的地址栏和底部导航栏会动态显示/隐藏。当你刚进入页面时，100vh是按“含工具栏”的总高度计算的。可一旦用户开始滚动，工具栏收起，实际可视区域变大了，但vh值不会自动更新 —— 结果就是页面看起来短了一截。
解法一：使用dvh（推荐）
现代浏览器引入了一个新单位叫dvh（dynamic viewport height），它可以感知工具栏的变化，真正做到“动态全屏”。
.screen { height: 100dvh; /* 动态适应！Safari 下表现完美 */ }✅ 支持情况：Chrome 79+、Firefox 96+、Safari 15.4+（iOS 15.4+）
❌ 不支持的老浏览器怎么办？往下看。
解法二：JavaScript fallback 方案（兼容性兜底）
我们可以用 JS 动态获取真实的视口高度，并注入为 CSS 变量：
function setVH() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } setVH(); window.addEventListener('resize', setVH);然后在 CSS 中这样用：
.screen { height: calc(var(--vh, 1vh) * 100); /* 如果 --vh 存在就用它，否则退化到 1vh */ }这样一来，无论什么设备、什么浏览器，都能拿到最接近真实可视区域的高度。
坑二：Android 键盘弹出会压缩页面，布局炸了！
特别是在表单页，用户点击输入框后软键盘弹出，视口被严重挤压。某些旧版 Android 浏览器甚至不会触发resize事件，导致vh值滞后，页面错位。
应对策略：
关键区域使用
position: fixedcss .form-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; }
固定定位可以脱离正常的流式布局，减少被挤压的影响。监听
focusin/focusout而非仅resizejs document.querySelector('input').addEventListener('focusin', () => { document.body.classList.add('keyboard-open'); }); document.querySelector('input').addEventListener('focusout', () => { document.body.classList.remove('keyboard-open'); });
然后通过类名调整样式，比如缩小 logo 或隐藏非必要元素。限制最大高度，防止按钮被遮挡
css .submit-btn { max-height: calc(100dvh - 200px); /* 留出键盘空间 */ }
更聪明的组合拳：calc()+vh= 自由掌控可用空间
很多时候我们并不想要“完全全屏”，而是希望排除导航栏、TabBar、广告横幅等固定组件后的可用高度。
这时候就可以祭出calc()函数：
.main-content { height: calc(100vh - 80px); /* 减去 header 和 footer */ overflow-y: auto; /* 内容超了就内部滚动 */ }这种模式非常适合数据仪表盘、后台管理系统等场景，既能保证主体区域充分利用空间，又避免全局滚动带来的体验割裂。
最佳实践总结：别让细节毁了整体
| 场景 | 推荐做法 |
|---|---|
| 登录页 / 引导页 | 使用100dvh或 JS 注入--vh，确保无滚动条 |
| 含固定头部的页面 | 主体用calc(100vh - Xpx)，避免溢出 |
| 移动端 H5 活动页 | 搭配 Flexbox 居中 +dvh提升沉浸感 |
| 表单交互页 | 监听 focus 状态，动态调整布局 |
| 老浏览器兼容 | 降级使用vh+ JS fallback |
| 字体与间距 | 配合rem使用，保持整体比例协调 |
另外提醒几点：
- 一定要加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端缩放会乱。
- 使用box-sizing: border-box，防止 padding 把盒子撑大。
- 尽量避免对html或body设置overflow: hidden，可能影响无障碍访问。
写在最后
vh看似只是一个小小的单位，但它背后代表的是从“基于文档”到“基于视口”的思维转变。掌握了它，你就不再受限于祖先元素的高度陷阱，也不必频繁调用 JavaScript 来监听 resize。
更重要的是，在构建 PWA、SPA、营销页、移动端交互页面时，你能快速打造出那种“一眼惊艳”的全屏视觉效果。
下次当你又想写height: 100%的时候，不妨停下来问一句：
“我到底是要继承父级，还是匹配屏幕？”
答案如果是后者，请毫不犹豫地选择100vh（或更好的100dvh）。
如果你在实现过程中遇到了其他挑战，欢迎在评论区分享讨论。
