企业官网建设流程全解析

简介：一份专门讲解如何让div高度自适应浏览器高度的PDF技术笔记，面向前端开发者和对CSS百分比高度有困惑的初学者。内容从百分比高度的计算原理切入，明确指出仅给div设置height:100%通常无效，根因在于父级未定义具体高度；随后给出同时设置html和body为height:100%的经典方案，并补充了清除默认边距、防止滚动条、使用box-sizing:border-box避免边框和内边距撑开元素等关键细节。针对更复杂的嵌套和响应式场景，还分别演示了Flexbox布局中flex:1自动填充剩余空间，以及Grid布局中1fr自适应行高的做法，帮助读者从原理到实践彻底掌握多类自适应手段，并附有可直接套用的CSS代码示例，便于对照调试。资源包仅含1个PDF文件，大小约27KB，内容精炼，是快速排查高度自适应问题的实用手册。目前已有4300人学习浏览，适合需要解决全屏背景、响应式布局或动态内容高度问题的开发人员下载参考。

1. height: 100% 失效？大概率是父级高度没撑住

接触过全屏页面、首屏引导图、或者登录页布局的前端，基本都撞上过同一堵墙：明明给div写好了height: 100%，浏览器里一看纹丝不动，高度还是由内容撑起来的。排查到最后，往往是一句html, body { height: 100%; }没写，而很多人并不知道这句代码为什么必须有。

原因在于 CSS 的百分比高度解析规则：子元素的百分比高度，永远基于父元素的计算高度。div的父级是body，body的父级是html，而html的父级是浏览器视口。这一条继承链中只要有一环没有显式高度，height: 100%就会退化成auto。所以「单位宽度好说，单位高度难调」这个老生常谈的问题，本质上是 CSS 高度传参链路的断裂。本文从原始的100%方案讲起，再覆盖滚动场景、Flexbox 与 Grid 布局，最后给到现代浏览器的svh/dvh进阶写法，一套讲完。

2. 记住这行代码：html 和 body 的高不要欠着

2.1 高度传参链的第一环

要让div的高度吃满整个浏览器窗口，首先要保证最上层的两个元素有明确高度。最常见的写法是把html和body的高度同时设为100%，并清掉默认边距：

html, body { height: 100%; margin: 0; padding: 0; }

这里的100%指的是父元素高度的 100%。对html来说，父元素是浏览器视口，所以html拿到的就是窗口的实际高度；body继承html的高度，同样为满屏。清除margin和padding是必要的，否则body默认的 8px 外边距会让整个页面出现一圈白边，视觉上高度永远是超出或不足的状态。

接下来div的高度就顺理成章了：

.fullscreen { height: 100%; width: 100%; box-sizing: border-box; }

box-sizing: border-box的语义是：元素的高度包含了padding和border的尺寸。假设你的div内边距是20px，边框是2px，在标准盒模型下实际渲染高度是100% + 44px，页面立即出现滚动条，而border-box则是总高固定为视口高度，内容区自动压缩。

提示：html和body的height: 100%必须成对出现，只写body { height: 100% }是无效的，因为body的父级html没有高度基准。

2.2 隐藏滚动条后还需要注意什么

原项目里有一段overflow: hidden，这是双刃剑。如果页面内容确实不超过一屏，加上它可以杜绝滚动条占位导致的高度抖动问题；但如果内容超过了视口高度，overflow: hidden会把多余部分直接裁掉，用户无法滚动查看。

区分两个场景：

在需要滚动的场景下，更推荐用min-height替代height，因为min-height允许内容撑开容器，而height: 100%会锁定高度，一旦内容超长就会溢出。这是很多人在写响应式首屏时遇到的第二个大坑。

3. 从 100% 到 calc()：处理头部高度和边距偏移

3.1 经典三明治布局：header 固定，主体撑满剩余空间

实际项目中，很少有页面是通顶通底一个裸div的。通常结构是顶部导航条加下方主体区域，或者头部、底部、中间三段式。此时中间区域的高度不能直接写100%，因为它是上述代码中父链的第三层，直接给100%会导致整体高度超出视口，滚动条出现。

假设 HTML 结构如下：

<div class="page"> <header class="header">导航栏 60px</header> <main class="content"> 主内容区，希望占满剩余高度 </main> </div>

常见的做法是让.page为视口高度，.header固定60px，.content使用calc()计算剩余空间：

.page { height: 100vh; display: flex; flex-direction: column; } .header { height: 60px; flex-shrink: 0; } .content { height: calc(100% - 60px); overflow-y: auto; }

calc(100% - 60px)是百分比高度和固定像素的混合运算，在 CSS 中加号和减号两侧必须保留空格，否则整个表达式无效。这里height: 100%的百分号基于.page的高度，而.page设置了100vh，所以减掉60px后正好是主体区域的高度。

3.2 vh 单位的优势和它的历史问题

vh单位指的是视口高度的 1%，100vh就等于浏览器窗口的可见高度。相比height: 100%，vh有一个明显优势：不依赖父级高度链路，直接以视口为基准。这在构建全屏页面时几乎是首选方案。

但vh有一个长期存在的坑：移动端浏览器地址栏的显示和隐藏会改变可视高度，而100vh在一部分浏览器中取的是地址栏收起状态的高度，导致页面底部被遮挡。所以在移动端优先的项目里，建议使用更新的动态视口单位。

.fullscreen { height: 100vh; /* 回退方案 */ height: 100dvh; /* 动态视口高度，跟随浏览器 UI 变化 */ }

dvh单位在地址栏隐藏时自动扩展，在地址栏显示时收缩，解决了移动端100vh的经典问题。桌面浏览器对dvh的支持也没有障碍，把它排在vh后面作为增强即可。

4. Flexbox 和 Grid 布局中的弹性高度填满

4.1 flex: 1 撑开剩余空间的实际语义

当布局层级变深，比如body内嵌套了一层.wrapper，再嵌套.content，每一层都写height: 100%会非常繁琐，而且漏掉任何一层都会导致高度断裂。使用 Flexbox 可以把「高度占满」转换为「弹性拉伸」问题。

<div class="wrapper"> <aside class="sidebar">侧边栏</aside> <section class="main"> <div class="container">容器内容</div> </section> </div>

.wrapper { display: flex; height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; } .main { flex: 1; display: flex; flex-direction: column; } .container { flex: 1; background: #f5f7fa; }

这里.main的flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的缩写，含义是：在主轴方向上吃掉所有剩余空间。由于.wrapper的高度是100vh，.main因此被撑满整个视口高度；.container再通过flex: 1填满.main剩余的高度。

flex属性中有一个容易忽视的细节：flex: 1不等同于flex: auto。前者基准值为0%，任何内容都不影响最终分配比例；后者基准值为auto，内容较多时会撑开容器，导致布局溢出。明确这一点后再写全屏布局，不会再出现「明明 flex: 1 了还是多出一截」的疑问。

4.2 Grid 的 1fr 轨道分配

Grid 布局处理自适应高度更加直观。经典的圣杯布局中，1fr表示「一份剩余空间」，与 Flexbox 的flex: 1思路类似，但语法上更接近二维规划。

.app { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; } .header { background: #333; color: #fff; } .footer { background: #333; color: #fff; } .main { background: #fff; overflow-y: auto; }

grid-template-rows: auto 1fr auto的含义是：第一行和第三行高度由内容决定（auto），第二行占据剩余所有空间（1fr）。这类写法适合整个页面的骨架布局，中部内容较多时自动出现滚动条，不会影响头部和底部的固定位置。

Flexbox 和 Grid 之间怎么选，有一个简单标准：

• 一维布局：只有垂直方向需要填满，用 Flexbox，代码更少，理解成本低。
• 二维布局：同时涉及行列的复杂结构，比如页头 + 主区域 + 侧栏 + 底部，用 Grid 的1fr更直观。
• 嵌套场景：外层用 Grid 搭骨架，内层用 Flexbox 排细节，两者不冲突。

5. 现代浏览器的更优解：使用 svh、dvh 与 clamp() 组合

移动端浏览器对100vh的诟病由来已久，地址栏一缩一放，页面高度跟着跳来跳去，底部操作栏被遮挡，这些都在推动视口单位的演进。现在主流的写法是svh、lvh、dvh三兄弟配合使用：

.hero { height: 100vh; /* 兼容旧浏览器 */ height: 100svh; /* 小视口高度，地址栏显示时的安全高度 */ height: 100dvh; /* 动态视口高度，跟随浏览器 UI 实时变化 */ }

svh表示最小的视口高度，即浏览器地址栏完全展开时的可视区域；dvh是动态值，随地址栏状态变化；lvh是最大视口高度，即地址栏隐藏时的高度。实际项目中svh更适合做底部固定工具栏，dvh更适合做全屏页面，因为没有内容被遮挡，视觉上永远填满当前可用空间。

提示：样式表中同一属性可以声明多次，浏览器只识别支持的最后一条，所以把回退值写在前面、新值写在最后是最稳妥的降级策略。

如果要让高度自适应再叠加一个安全边距，可以结合min()或clamp()使用：

.full-height { height: calc(100dvh - 80px); /* 或者限制在一个合理区间内 */ height: clamp(480px, 100dvh, 1080px); }

clamp(480px, 100dvh, 1080px)中，第二个参数是首选值，第一个和第三个分别是下限和上限。当视口高度小于480px时取480px，大于1080px时取1080px，中间则跟随100dvh。这适合那些高度过小或过大时布局会崩的场景，比如可视化大屏项目，可以避免在超长屏幕上把div拉到变形。

最后给一个可以直接抄的通用模板，覆盖桌面和移动端：

html, body { height: 100%; margin: 0; padding: 0; } .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .page-main { flex: 1; overflow-y: auto; }

这个模式中.page使用了min-height而不是height，好处是内容超过一屏时页面整体可以自然增长，不会有内容被截断的风险，内部滚动交给.page-main的overflow-y: auto处理。把这段代码复制到任何需要首屏铺满的项目里，然后根据实际骨架结构调整内部容器的flex比例即可。

本文还有配套的精品资源，点击获取