多行Grid布局中vh高度分配的核心要点

如何让 Grid 布局真正“撑满屏幕”？你踩过的`vh`高度坑，都在这里了

最近在重构一个后台管理系统时，我再次被一个看似简单的问题卡住了：为什么我的页面明明设置了100vh，却还是出现了垂直滚动条？

更离谱的是，在 iPhone 上打开，页面底部竟然被浏览器工具栏“吃掉”了一截——用户根本看不到页脚。这显然不是设计想要的效果。

翻遍文档、查遍社区后才发现，问题的根源不在 Grid，也不在 CSS 语法错误，而在于我们对vh这个单位的理解太理想化了。尤其是在多行 Grid 布局中，一旦涉及高度分配，稍有不慎就会掉进各种“视觉陷阱”。

今天，我就结合实战经验，彻底讲清楚多行 Grid 中如何用好视口高度单位，帮你避开那些年我们都踩过的坑。

你以为的`100vh`，真的等于“整个屏幕”吗？

先来泼一盆冷水：

100vh并不总是等于用户实际可见的高度。

听起来反直觉，但这是事实。尤其在移动端，Safari、Chrome for Android 等浏览器会把地址栏、底部导航栏的高度也算进window.innerHeight。也就是说：

height: 100vh;

这段代码在某些设备上，实际上比你能看到的内容区域还要高。结果就是页面轻微溢出，触发不必要的滚动条，甚至导致固定定位元素错位。

那怎么办？用`dvh`！

现代浏览器引入了一个新单位：dvh（dynamic viewport height），它能动态排除浏览器 UI 的影响，真正反映用户可交互区域的高度。

.page-layout { height: 100dvh; /* 推荐替代 100vh */ }

支持情况如下：
- ✅ Chrome 79+
- ✅ Safari 15.4+
- ✅ Edge 105+
- ❌ IE 全系不支持（当然现在谁还在乎呢）

如果你需要兼容老版本浏览器，别急，后面我会给出降级方案。

Grid 行高为啥没按比例分？因为你漏了这个前提

我们经常这样写：

.container { display: grid; grid-template-rows: 1fr 2fr 1fr; }

期望三行按 1:2:1 分配高度。但现实往往是：前三行紧紧贴在一起，根本没有拉伸。

原因很简单：fr单位只作用于“剩余空间”。而“剩余空间”的前提是容器本身要有明确的高度。

换句话说：

🔴fr不是魔法，它不能凭空创造高度。
🟢 它只是在一个已知大小的盒子里，把剩下的地方按比例切分。

所以正确的做法是：

.page-grid { height: 100dvh; /* 必须设置容器高度 */ display: grid; grid-template-rows: 1fr 2fr 1fr; }

只有当.page-grid明确知道自己有多高时，Grid 才知道怎么把这高度分给三行。

实战案例：构建一个真正全高的页面结构

来看一个典型需求：做一个带头部、主体和底部的管理后台，要求：

头部至少 60px，内容多时可自适应
底部至少 80px，同样可扩展
主体区域占满中间所有剩余空间
整体不出现非预期滚动

我们可以这样实现：

.page-grid { height: 100dvh; display: grid; grid-template-rows: minmax(60px, auto) /* header 最小60px */ 1fr /* main 自动填充 */ minmax(80px, auto); /* footer 最小80px */ gap: 1rem; } header { grid-row: 1; } main { grid-row: 2; overflow-y: auto; } footer { grid-row: 3; }

关键点解析：

minmax(60px, auto)
意思是：“至少给我 60px，但如果内容更高，就让我自动增长”。这比写死60px更灵活。
1fr给主体
它拿到的是“总高度 - 头部高度 - 底部高度 - 两个 gap”的剩余空间。完全无需计算具体数值。
gap: 1rem会被自动扣除
Grid 规范规定，gap是从容器内部扣除的，不会额外增加总高度，非常友好。
main加overflow-y: auto
当内容太多时，主体区域自己滚动，不影响整体布局结构。

这套模式已经被我用在多个项目中，稳定可靠。

移动端适配：那些必须注意的细节

即使用了dvh，也不能高枕无忧。不同设备的行为差异仍然存在。

坑点1：iPhone 安全区（Safe Area）

全面屏手机（如 iPhone X 及以上）底部有个“小黑条”，如果不处理，你的页脚可能会被挡住。

解决办法是使用环境变量：

body { padding-bottom: env(safe-area-inset-bottom); }

或者直接整合到 Grid 布局中：

.page-grid { height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }

这样系统会自动留出安全距离。

坑点2：老浏览器不支持`dvh`怎么办？

可以用 JavaScript 动态计算并注入 CSS 变量作为降级方案：

function setVH() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } // 初始化 + resize 监听 setVH(); window.addEventListener('resize', setVH);

然后在 CSS 中使用：

.page-grid { height: calc(var(--vh, 1vh) * 100); }

解释一下：
- 如果浏览器支持dvh，可以直接用；
- 不支持的话，通过 JS 提供的--vh变量模拟真实可用高度；
-1vh作为兜底值，确保基本功能可用。

这个技巧已经在生产环境中验证过，效果接近原生dvh。

坑点3：字体放大或内容过多导致溢出

有时候设计师忘了考虑极端情况：比如用户把浏览器字体调到最大，或者某个弹窗文案特别长。

这时即使用了minmax(auto)，也可能因为整体高度受限而导致内容被裁剪。

建议策略：
- 对可能大量内容的区域启用局部滚动（如main { overflow-y: auto }）
- 使用clamp()控制字体响应式范围：

main { font-size: clamp(14px, 4vw, 18px); }

避免在窄屏上文字过大破坏布局。

高阶技巧：结合媒体查询优化小屏体验

当视口高度非常小时（比如折叠态手机或竖屏 iPad），强行等分布局会让每行都变得太挤。

可以通过媒体查询调整结构：

@media (max-height: 500px) { .page-grid { grid-template-rows: auto 1fr auto; font-size: 0.9rem; gap: 0.5rem; } }

在这种情况下，适当缩小间距、降低字号，优先保证可读性和操作空间。

你也可以进一步隐藏非关键元素：

@media (max-height: 400px) { header .logo-text { display: none; } }

用户体验远比“完美布局”重要。

写在最后：别再盲目用`100vh`了

总结一下我在实践中提炼出的核心原则：

原则	说明
✅ 优先使用`100dvh`替代`100vh`	更准确反映用户可见区域
✅ 必须为 Grid 容器设置显式高度	否则`fr`无效
✅ 合理使用`minmax()`控制最小尺寸	防止内容挤压
✅ 为主内容区添加`overflow-y: auto`	避免全局滚动
✅ 考虑安全区域和字体缩放	提升边缘场景体验
✅ 提供 JS 降级方案	兼容旧浏览器