用vh和 Grid 搭出真正“贴满屏幕”的现代布局
你有没有遇到过这样的问题：明明写了height: 100%，页面底部还是留了一截白边？或者在手机上打开网页，header 被缩进刘海后面、内容被圆角裁掉一角？更别提用户一滚动，整个页面都“跳”了起来——这其实是传统布局面对现代设备时的典型水土不服。
这些问题的背后，是我们在用旧方法应对新场景。今天我们就来聊聊一个简单却强大的组合拳：CSS 的vh单位 + Grid 布局，它能帮你轻松构建结构清晰、自适应强、体验流畅的全屏页面架构。
为什么100vh比100%更靠谱？
先说个很多人踩过的坑：
html, body { height: 100%; } .main { height: 100%; /* 你以为它会占满？其实不一定 */ }这段代码看似合理，但只要父级没有明确高度（比如<html>或<body>默认是“内容撑开”），那height: 100%就会失效。而vh完全绕开了这个嵌套依赖的问题。
1vh = 1% 视口高度—— 不管你在第几层 DOM，100vh永远等于当前屏幕可见区域的高度。
所以，想让一个容器真正“贴满屏幕”，最直接的方式就是：
.fullscreen-layout { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }注意这里用了auto 1fr auto，而不是死板地写60vh 20vh 20vh。为什么？因为硬编码百分比容易导致内容溢出或空间浪费，而1fr（弹性分数）能让中间区域自动填充剩余空间，更加灵活。
Grid 是怎么把页面“划格子”的？
如果说vh解决了“高多少”的问题，那 Grid 就解决了“怎么分”的问题。
传统的布局靠float、flex甚至 JavaScript 计算位置，复杂一点就得写一堆逻辑。而 Grid 是原生支持二维布局的 CSS 模块，你可以像画表格一样定义行和列。
举个实际例子：我们要做一个典型的三段式页面——顶部导航栏、中间内容区、底部状态栏。
.page { height: 100vh; display: grid; grid-template-areas: "header" "main" "footer"; grid-template-rows: 60px 1fr 40px; /* 固定头尾，中间自适应 */ gap: 0; } .header { grid-area: header; background: #1e1e1e; color: white; } .main { grid-area: main; background: #f5f5f5; overflow-y: auto; } .footer { grid-area: footer; background: #333; color: white; text-align: center; }对应的 HTML 非常干净：
<div class="page"> <header class="header">导航栏</header> <main class="main">这里是长篇内容……</main> <footer class="footer">© 2025 我的第一个全屏应用</footer> </div>关键设计点解析
.main开启overflow-y: auto
这是最关键的一环。我们不希望滚动时 header 和 footer 一起动，那样会破坏视觉稳定性。只让内容区自己滚，就能实现类似原生 App 的固定头部体验。使用
grid-template-areas提升可读性
相比记忆grid-row: 2 / 3这种数字定位，grid-area: main明显更直观，后期维护也更容易。1fr自动填空
中间区域设为1fr，意味着它会吃掉所有剩下的垂直空间，无论视口是 600px 还是 1000px 高。
移动端适配：那些你不得不知道的“坑”
听起来很完美对吧？但在真实世界中，尤其是 iOS 设备上，事情没那么简单。
问题一：iPhone 上100vh实际不够高
在 iPhone Safari 中，浏览器地址栏是动态隐藏的。当你开始滚动时，地址栏收起，视口变高，1vh的值也随之变化——这就导致页面布局“抖动”。
✅ 解法一：改用dvh（推荐）
现代浏览器引入了新的单位：
dvh: dynamic viewport height（动态视口高度）svh: small viewport heightlvh: large viewport height
它们能根据 UI 状态自动调整，避免抖动。
.page { height: 100dvh; /* 在支持的浏览器中优先使用 */ height: 100vh; /* 降级方案 */ }可以通过特性查询进一步优化：
@supports (height: 100dvh) { .page { height: 100dvh; } }✅ 解法二：JS 动态注入变量（兼容老版本）
如果不支持dvh，可以用 JS 获取真实高度并设置为 CSS 变量：
function setViewportHeight() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } // 初始化 + 监听 resize setViewportHeight(); window.addEventListener('resize', setViewportHeight);然后在 CSS 中使用：
.page { height: calc(var(--vh, 1vh) * 100); }这样即使在老旧 iOS 上也能稳定表现。
问题二：刘海屏安全区域被忽略
如果你的内容紧贴顶部，在 iPhone X 及以上机型中可能会被“刘海”遮挡。
解决方案是利用系统环境变量：
.header { padding-top: env(safe-area-inset-top); /* 避开刘海 */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }这些env()值由操作系统提供，确保内容不会被硬件切口挡住。
更复杂的布局？Grid 同样游刃有余
上面的例子是单列结构，但如果需要左右分栏呢？比如左侧菜单 + 主内容区？
完全没问题：
.layout { height: 100dvh; display: grid; grid-template-areas: "sidebar content"; grid-template-columns: 250px 1fr; grid-template-rows: 100%; } .sidebar { grid-area: sidebar; background: #2c2c2c; color: white; } .content { grid-area: content; overflow-y: auto; }还可以结合媒体查询做响应式切换：
@media (max-width: 768px) { .layout { grid-template-areas: "sidebar" "content"; grid-template-columns: 1fr; grid-template-rows: 60px 1fr; } }小屏幕上自动变为上下结构，兼顾可用性与美观。
实战建议：几个提升体验的小技巧
1. 字体大小也用相对单位
避免在小屏幕上文字过大或过小：
body { font-size: clamp(14px, 4vw, 18px); /* 在一定范围内随屏幕缩放 */ }2. 内容区滚动顺滑一点
.main { overflow-y: auto; -webkit-overflow-scrolling: touch; /* iOS 滚动更流畅 */ scroll-behavior: smooth; }3. 别忘了最小高度兜底
防止极端小屏下内容被压缩：
.main { min-height: 200px; }这种模式适合哪些项目？
这套方案特别适合以下类型的应用：
- 数据仪表盘：固定 header 显示筛选器，中间图表区域滚动查看，footer 显示更新时间；
- PWA 应用：追求类原生体验，需要精准控制视口；
- 在线编辑器 / IDE：多区域划分（文件树、编辑区、终端）；
- 视频播放页：顶部标题 + 中部播放器 + 底部操作栏；
- 作品集网站：全屏翻页式展示，每屏刚好一屏。
它最大的优势在于：几乎不需要 JavaScript 控制布局，样式全部由 CSS 声明式完成，性能好、易维护、响应快。
最后一点思考
我们正在进入一个多形态设备共存的时代：折叠屏、平板、手机、桌面显示器……用户的视口不再是固定的矩形。过去那种“先做 PC 再适配手机”的思维已经落伍。
而vh+ Grid 的组合，正是顺应这一趋势的轻量级解决方案。它不依赖框架，不增加运行时负担，仅靠标准 CSS 就实现了高度解耦的布局体系。
未来随着container queries和更智能的视口单位普及，我们会看到更多基于“容器自身”而非“屏幕尺寸”的自适应设计。但现在，掌握好100vh、1fr、grid-area这几个关键词，就已经能解决绝大多数布局难题了。
如果你正准备搭建一个新的 Web 应用骨架，不妨试试从这一行代码开始：
> .app { height: 100dvh; display: grid; }也许你会发现，原来“贴满屏幕”可以这么简单。
你在项目中用过类似的布局方式吗？遇到了什么挑战？欢迎在评论区交流！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
