简介一份专门讲解如何让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的父级是bodybody的父级是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会把多余部分直接裁掉用户无法滚动查看。区分两个场景场景overflow 取值配合属性全屏落地页无滚动需求hiddenheight: 100%页面可能滚动但首屏 div 撑满auto或默认值min-height: 100%在需要滚动的场景下更推荐用min-height替代height因为min-height允许内容撑开容器而height: 100%会锁定高度一旦内容超长就会溢出。这是很多人在写响应式首屏时遇到的第二个大坑。3. 从 100% 到 calc()处理头部高度和边距偏移3.1 经典三明治布局header 固定主体撑满剩余空间实际项目中很少有页面是通顶通底一个裸div的。通常结构是顶部导航条加下方主体区域或者头部、底部、中间三段式。此时中间区域的高度不能直接写100%因为它是上述代码中父链的第三层直接给100%会导致整体高度超出视口滚动条出现。假设 HTML 结构如下div classpage header classheader导航栏 60px/header main classcontent 主内容区希望占满剩余高度 /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 classwrapper aside classsidebar侧边栏/aside section classmain div classcontainer容器内容/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比例即可。本文还有配套的精品资源点击获取