如何用vh和 Grid 布局打造真正灵活的页面结构？
你有没有遇到过这样的问题：明明给一个容器设了height: 100%，结果它就是“塌”了，一点高度都没有？或者在手机上调试登录页时，发现底部按钮被键盘顶上去、布局乱成一团？
这些问题背后，往往是因为我们还在用“老办法”处理现代网页的高度控制。而解决它们的关键，其实就藏在一个看似简单的单位里——vh。
当vh遇上 CSS Grid，你会发现，原来实现跨设备一致的全屏布局，可以这么轻松。
为什么传统高度控制总是“不听话”？
先来回顾一下常见的高度写法：
.container { height: 100%; /* 想占满父容器 */ }但这个100%能生效的前提是：它的父元素必须有明确的高度定义。如果从<html>到<body>再到.container这条链路上有任何一环没设高度，那height: 100%就会失效——浏览器根本不知道“100%”到底是谁的100%。
这就是所谓的“布局塌陷”。
再看px，虽然固定，但在不同屏幕上表现差异巨大。一个800px高的设计，在手机上可能要滚动两次才能看完；在大显示器上又显得空荡荡。
至于%，它依赖上下文，嵌套层级一深就容易失控。
所以，我们需要一种不依赖父级、直接响应视口变化的高度单位。这正是vh的价值所在。
vh不只是“视口高”，它是布局的新基准
vh是 viewport height 的缩写，1vh = 当前可视区域高度的 1%。比如屏幕高 900px，那么100vh就是 900px。
.full-height { height: 100vh; }就这么一行代码，就能让元素稳稳撑满整个屏幕可视区，不需要任何 JavaScript 计算，也不需要层层传递高度。
但这还不是全部。vh的真正威力，在于它能和现代布局系统深度结合——尤其是CSS Grid。
Grid + vh：二维布局遇上动态高度
Grid 是目前最强大的原生 CSS 布局方案之一。它允许我们同时规划行和列，像搭积木一样组织页面结构。
假设我们要做一个典型的后台管理系统布局：顶部导航栏、中间内容区、底部版权栏。目标是让整体占满屏幕，内容区自动填充剩余空间，并且内容过多时只在内部滚动。
用 Grid 怎么做？
.layout { display: grid; height: 100vh; /* 关键！绑定视口作为总高度基准 */ grid-template-rows: 70px 1fr 50px; grid-template-areas: "header" "main" "footer"; }就这么几行，已经完成了核心布局逻辑：
- 容器高度锁定为视口高度；
- 头部固定 70px，底部固定 50px；
- 中间区域用
1fr吃掉所有剩下的空间。
无论窗口怎么缩放，.main区域始终拥有最大可用高度。这才是真正的“自适应”。
而且你可以进一步优化体验：
.main { overflow-y: auto; /* 内容超长时局部滚动 */ padding: 1rem; }这样一来，页面本身不会出现滚动条，用户体验更干净，也避免了移动端常见的“双滚动”干扰。
实战进阶技巧：让高度更聪明
1. 防止主区域被压缩得太小
有时候，用户把浏览器窗口拉得很矮，导致内容区只剩几十像素高，文字都看不清了。这时候我们可以加个“保底线”：
grid-template-rows: 70px minmax(200px, 1fr) 50px;minmax(200px, 1fr)表示：这个区域最少要有 200px 高，如果还有多余空间，那就继续扩展。一旦低于 200px，就会触发.main的滚动机制。
这种设计既保证了可用性，又充分利用了空间。
2. 按比例分配高度，适合引导页或轮播
如果你在做产品介绍页、教程引导或全屏幻灯片，可以直接按百分比划分：
.grid-container { height: 100vh; grid-template-rows: 20vh 60vh 20vh; }三行分别占 20%、60%、20%，不管屏幕多高，比例永远不变。非常适合视觉节奏强的页面。
3. 根据屏幕高度切换布局策略
有些布局在高屏和低屏下应该有不同的表现。比如大屏幕上可以宽松些，小屏幕上则要压缩非主要内容。
我们可以用基于高度的媒体查询来应对：
/* 小屏幕（如手机横屏） */ @media (max-height: 600px) { .layout { grid-template-rows: 50px minmax(150px, 2fr) 40px; font-size: 14px; } } /* 正常及以上高度 */ @media (min-height: 601px) { .layout { grid-template-rows: 80px 1fr 60px; font-size: 16px; } }这样做的好处是：不只是适配宽度，连纵向空间也能精细调控，真正做到“全方位响应式”。
移动端坑点提醒：100vh可能并不等于“看到的屏幕”
这里有个非常关键的问题很多人踩过坑：在 iPhone Safari 上，100vh实际显示比你想象中小一块！
原因在于：移动浏览器的地址栏是动态显示/隐藏的。页面加载时地址栏存在，100vh是包含它的；当你开始滚动，地址栏收起，视口变高，但vh值不会重新计算，导致页面底部留白或内容截断。
解决方案是什么？
👉 使用dvh（dynamic viewport height）！
.layout { height: 100dvh; /* 动态视口高度，自动适应 UI 变化 */ }dvh是现代浏览器推出的新单位，专门用来解决这个问题。它会根据实际可见区域动态调整，即使地址栏消失也不会出错。
当然，考虑到兼容性，建议写个降级：
.layout { height: 100vh; /* fallback */ height: 100dvh; /* modern browsers */ }主流浏览器如 Chrome、Safari、Edge 的较新版本均已支持dvh，可以在新项目中放心使用。
更多实用组合拳
除了基础布局，vh+ Grid 还能在这些场景中大显身手：
✅ 卡片式网格布局，保持统一视觉节奏
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: minmax(15vh, auto); /* 最小高度基于视口 */ gap: 1rem; }这样每张卡片至少有一定高度，避免短内容卡片看起来“缩水”。
✅ 视频播放器容器，维持宽高比的同时适配高度
.video-container { height: 80vh; aspect-ratio: 16 / 9; margin: auto; }利用aspect-ratio结合vh，确保视频框在各种屏幕上都能完整显示，不会被拉伸或裁剪。
✅ 登录页居中布局，完美垂直居中
.login-page { display: grid; height: 100dvh; place-items: center; /* 水平+垂直居中 */ background: #f7f7f7; }再也不用手写transform: translateY(-50%)或 JS 计算了，Grid 一行搞定。
工程实践建议
| 场景 | 推荐做法 |
|---|---|
| 全屏布局 | 优先使用100dvh，降级100vh |
| 主内容区 | 使用1fr或minmax()控制弹性 |
| 局部滚动 | 给具体区域设overflow-y: auto |
| 响应式优化 | 配合(min-height)媒体查询调整布局 |
| 兼容性处理 | 对不支持dvh的浏览器提供 fallback |
此外，别忘了测试真实设备上的表现，特别是 iOS Safari 和 Android Chrome 的行为差异。
写在最后
vh看似只是一个长度单位，但它改变了我们思考页面高度的方式——从“依赖父级”转向“面向视口”。当它与 Grid 布局结合后，更是释放出惊人的灵活性。
无论是管理后台、登录页、H5 活动页还是单页应用，这套组合都能帮你快速搭建出稳定、美观、跨设备一致的页面骨架。
与其在 JavaScript 里反复监听window.resize，不如试试纯 CSS 的优雅解法。毕竟，最好的代码，就是不用写的那一部分。
如果你正在重构旧项目中的布局逻辑，不妨从替换几个height: 100%开始，换成100dvh+ Grid 的新模式。你会发现，很多曾经头疼的问题，突然就不复存在了。
互动时间：你在项目中用过
vh+ Grid 吗？有没有遇到什么奇怪的表现？欢迎在评论区分享你的经验！
