HTML让div铺满全屏的几种实用方案
经常有人说CSS里最基础的布局问题往往水最深——让一个div占满整个屏幕就是个典型例子。看似简单，但背后涉及浏览器差异、视口定义和渲染机制，稍不注意就会踩坑。很多开发者在实际项目中都会遇到“div无法铺满全屏”的困扰，本文将从多个角度给出解决方案，帮助你轻松应对各种场景。
直接用 100vh 和 100vw 确实是用起来最痛快的写法，一行CSS搞定。但凡事都有代价——iOS Safari在滚动时地址栏收放会导致高度值跳变，这不是bug，是Safari在iOS上的固有表现。解决方案要么是用JS实时补偿，要么干脆换成 position: fixed。对于追求稳定全屏效果的开发者，建议优先考虑后面提到的固定定位方案。
为什么 height: 100% 常常失效
百分比高度之所以不灵，是因为它依赖父容器有明确的高度定义。如果 html 和 body 没设置 height: 100%，或者中间某个层用了 display: block 但没写死高度，那子元素的 height: 100% 就自动退化为内容高度撑开的尺寸。这是很多新手踩坑的主要原因，也是“div占满全屏”最常见的拦路虎。
- 先重置根元素：
html, body { margin: 0; padding: 0; height: 100%; } box-sizing: border-box必须加在根容器或目标元素上，否则padding和border会把实际尺寸撑出视口范围- 滚动条宽度（大约17px）会被
100vw纳入计算，但100%则完全不考虑它——所以跨场景下100vw反而更可靠，尤其适合需要精确全屏的场景
position: fixed 是最稳的全屏覆盖方案
这个方案特别适合模态框、视频背景、Canvas渲染这类不需要随页面滚动、也不受父级 overflow 或 transform 干扰的场景。它也是目前公认最稳定的“div全屏撑满”方法，能够避免许多布局兼容性问题。
- 写法简单直接：
.fullscreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } - 完全不用关心父容器是否设置了定位，它只认视口本身
- 但在iOS Safari中，如果固定定位元素里含有
，软键盘弹出时100vh可能失效，此时需要监听resize事件，动态设置style.height = window.innerHeight + 'px' - 别忘了顺手加上
z-index，不然费了半天劲结果被别的元素盖住了，那就尴尬了
真·浏览器全屏必须用 requestFullscreen()
CSS再怎么撑也只是「视觉满屏」，只有调用原生API才能进入系统级全屏模式（类似按F11的效果），并且能响应 fullscreenchange 事件。对于需要播放视频、展示游戏或演示文稿的场景，这才是真正的“div全屏”终极方案。
- 这个API只能由用户手势触发（
click、keydown都行），绝不能放在setTimeout或load事件里直接调用 - 调用前得确认元素已经挂载到DOM：
document.body.contains(el)返回true，否则会抛NotFoundError - 千万别用
document.requestFullscreen()——现代浏览器基本不支持，而且行为不一致；正确的做法是作用在具体的div或video元素上 - 退出全屏统一用
document.exitFullscreen()，不要自己去删class或改样式，那容易留下状态混乱的隐患
iOS Safari 的 100vh 跳变怎么处理
横竖屏切换、地址栏收起或展开，都会导致 100vh 的值突变（比如从640px跳到720px），视觉上明显「抖一下」。这还真不是CSS写错了，是Safari的渲染机制在作祟。很多开发者在此处反复调试，却忽略了最直接的解决方案。
- 最简兜底方案：用JS动态写高度
el.style.height = window.innerHeight + 'px'; - 同时监听
resize和orientationchange事件，但在iOS上resize触发不够及时，建议加一层防抖处理 - 如果只是静态满屏场景（比如启动页），可以加上
viewport元标签禁用缩放： - 慎用
min-height: 100vh做布局容器——它无法阻止内容溢出，反而可能引发双滚动条的尴尬局面
说到底，真正难的不是写出满屏样式，而是判断该用CSS视觉满屏，还是原生全屏API；以及在iOS环境下敢不敢放弃 vh，改用JS实时同步高度。这是实实在在的经验积累，不是背几行代码就能搞定的。掌握这些技巧后，你就能在各种项目中灵活应对“div铺满全屏”的需求，避免踩坑。
