让页面真正“贴满屏幕”：用vh+ CSS Grid 实现智能高度控制
你有没有遇到过这样的问题？设计稿里写着“整个页面占满一屏”，结果开发时发现，内容少的时候底部一大片空白，内容多的时候又莫名其妙地滚动了两次——一次是页面本身，另一次是某个区域的局部滚动。更糟的是，在手机上打开，地址栏一收一放，页面布局直接“抽搐”。
这其实是现代前端布局中的经典痛点：如何让一个 Grid 容器真正贴合用户的可视区域，既不溢出也不留白？
答案藏在一个看似简单的单位里：vh。
但别小看它。这个单位和 CSS Grid 搭配起来，能构建出极其稳定、自适应的页面骨架。我们今天就来彻底讲清楚：怎么用vh控制 Grid 容器的高度，让它在各种设备上都表现得像“原生应用”一样自然。
为什么传统方式搞不定“满屏”？
先来看个常见场景。
假设你要做一个管理后台，结构很清晰：顶部导航栏、左侧菜单、中间主内容区、底部页脚。理想状态是：
- 头部和页脚固定高度；
- 主体区域自动填满剩下的空间；
- 整个布局从顶到底严丝合缝，不多不少正好一屏。
如果不用vh，你会怎么做？
❌ 方案一：靠内容撑高
.container { display: grid; grid-template-rows: 60px 1fr 40px; }问题来了：如果内容太少，容器压根不到一屏，底部空一大截；内容太多呢？整个页面滚起来，用户体验割裂。
❌ 方案二：写死高度（比如height: 800px）
这更离谱。不同设备视口千差万别，iPhone 和 27 寸显示器怎么可能共用一个像素值？
所以，我们需要一种与屏幕绑定、又能动态响应变化的高度单位。这就是vh的主场。
vh到底是什么？不只是“100% 高度”那么简单
vh是 viewport height 的缩写，意思是“视口高度的 1%”。听起来简单，但它背后有几个关键特性，决定了它是否适合你的项目。
| 特性 | 说明 |
|---|---|
| 基于可视窗口 | 不管父元素多高，100vh就是当前你能看到的屏幕高度 |
| 动态更新 | 窗口大小改变时，浏览器会自动重新计算 |
| 支持小数 | 可以写50.5vh，精细控制布局比例 |
| 可组合使用 | 能和calc()配合，比如calc(100vh - 60px) |
举个例子：
.full-height { height: 100vh; }这段代码的意思是：“不管你有多少内容，也不管你在什么设备上，我都想把自己拉到和屏幕一样高。”
听起来完美，对吧？但在移动端，事情没这么简单。
⚠️坑点预警：iOS Safari 的
100vh包含了浏览器 UI！
当你在 iPhone 上打开网页，100vh实际上包含了地址栏和底部标签栏的高度。等你滑动页面隐藏地址栏后，真正的可视区域变大了，但 CSS 还按原来的100vh渲染，导致内容被裁剪或出现双层滚动条。
这个问题困扰了无数开发者。那怎么办？
解决方案升级：从100vh到100dvh，再到 JS 补丁
好在现代浏览器已经开始支持新的单位来解决这个问题。
✅ 推荐方案 1：优先使用dvh（dynamic viewport height）
.app { height: 100dvh; /* 动态视口高度，随 UI 显示/隐藏自动调整 */ }dvh是专门为移动设备优化的单位，它会排除浏览器 UI 的影响，始终反映真实的可视高度。目前主流现代浏览器（Chrome, Edge, Safari 16+）均已支持。
🛠️ 兼容方案 2：JavaScript 动态注入真实高度
如果你还需要兼容老版本 iOS，可以用 JS 获取真实高度并设置为 CSS 变量：
function setVH() { const vh = window.innerHeight / 100; document.documentElement.style.setProperty('--vh', `${vh}px`); } // 初始化 + 监听 resize setVH(); window.addEventListener('resize', setVH);然后在 CSS 中使用：
.app { height: calc(var(--vh) * 100); /* 等价于 100vh，但更准确 */ }这样一来，无论用户怎么缩放、旋转设备，甚至弹出键盘，你都能拿到最真实的“可用高度”。
Grid 布局实战：打造一个稳定的管理后台框架
现在我们回到最初的结构：头部、侧边栏、主内容、页脚。目标是——无论内容多少，整体布局始终贴满屏幕，只有主内容区可以独立滚动。
HTML 结构如下：
<div class="layout"> <header>Header</header> <aside>Sidebar</aside> <main>Content goes here...</main> <footer>Footer</footer> </div>对应的 CSS：
.layout { display: grid; height: 100dvh; /* 或 calc(var(--vh) * 100) */ grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-rows: 60px 1fr 40px; grid-template-columns: 250px 1fr; gap: 1px; margin: 0; padding: 0; } header { grid-area: header; background: #333; color: #fff; } aside { grid-area: sidebar; background: #f0f0f0; } main { grid-area: main; overflow-y: auto; padding: 20px; background: white; } footer { grid-area: footer; background: #ddd; text-align: center; }关键点解析：
height: 100dvh
确保容器高度始终等于真实可视高度，避免移动端裁剪问题。grid-template-rows: 60px 1fr 40px
- 第一行固定 60px（头部）
- 第二行1fr占据所有剩余空间（主内容区）
- 第三行固定 40px（页脚）
这样一来，主内容区的高度 = 总高度 - 60px - 40px，完全由系统自动分配。
overflow-y: autoon<main>
当内容超出时，只允许主区域滚动，不会带动整个页面滚动，体验更接近原生 App。gap: 1px
细节加分项。可以用浅灰色实现类似“分割线”的视觉效果，比 border 更轻量。
常见陷阱与避坑指南
即便逻辑清晰，实际开发中仍有不少“阴沟翻船”的情况。
🔹 陷阱一：子元素height: 100%不生效
你以为给<main>设置height: 100%就能继承 Grid 分配的高度？错。
原因在于：Grid 子项的高度是由 Grid 自己管理的，百分比高度需要显式上下文支持。
✅ 正确做法：
- 如果只是想让内部元素填满，可以直接使用 Flexbox 嵌套：css main { display: flex; flex-direction: column; gap: 16px; }
- 或者明确声明：css main > .wrapper { height: 100%; }
但记住：Grid 已经帮你算好了高度，很多时候根本不需要再设百分比。
🔹 陷阱二：键盘弹出导致布局压缩（移动端表单页）
在手机上填写登录表单时，软键盘弹出会大幅缩小视口高度。如果你用了height: 100dvh，系统会自动调整；但如果用的是旧版100vh，页面会被强行挤压，甚至出现横向滚动条。
✅ 应对策略：
- 使用min-height替代height：css .login-container { min-height: 100dvh; }
- 主内容区启用局部滚动；
- 必要时监听visualViewport事件做微调（进阶用法）。
🔹 陷阱三：嵌套vh导致高度叠加
不要这样做：
.parent { height: 50vh; } .child { height: 50vh; } /* 实际是 25vh？还是 50vh？容易混淆 */尤其是父子都用vh时，语义不清，维护困难。建议外层用vh，内层用fr或百分比。
最佳实践清单（收藏级）
| 场景 | 推荐写法 | 说明 |
|---|---|---|
| 全屏容器 | height: 100dvh | 优先使用动态单位 |
| 兼容老旧设备 | height: calc(var(--vh) * 100) | JS 注入真实高度 |
| 防止内容溢出截断 | min-height: 100dvh | 容器可扩展 |
| 减去固定头部 | height: calc(100dvh - 60px) | 精确控制可用空间 |
| 内部进一步布局 | 在main中使用flex | 更灵活的内容排列 |
| 响应小屏设备 | 加媒体查询： |
@media (max-height: 600px) { .layout { grid-template-rows: 50px 1fr 30px; } } ``` | 提升小屏可用性 | --- ## 写在最后：每一个像素都值得被认真对待 `vh` 看似只是一个长度单位，但它背后代表的是我们对用户体验的追求：**页面应该适应人，而不是让人去适应页面**。 当我们将 `vh` 与 CSS Grid 结合，就获得了一种强大的能力——构建出无论在桌面、平板还是手机上，都能保持一致视觉节奏的布局系统。 未来，随着 `svh`（small viewport height）、`lvh`（large viewport height）等更精细化单位的普及，我们将能做出更加智能的响应式判断。例如： ```css /* 小屏幕优先使用 dvh，大屏幕用 lvh */ @container (min-height: 800px) { .panel { height: 100lvh; } }但现在，掌握100dvh + Grid + 1fr这个黄金组合，已经足以让你的项目甩开大多数同行。
下次当你接到“这个页面要占满一屏”的需求时，不要再靠猜、靠试、靠 JS 强行修正了。
用dvh，让浏览器自己算。
毕竟，最好的代码，是让人看不见的代码。
