HTML怎么让div铺满全屏_html div全屏撑满页面方法实战

100vh/vw 最快但 iOS Safari 地址栏收放致高度跳变，需 JS 补偿或用 position: fixed；height: 100% 失效因父级无显式高度；box-sizing: border-box 防尺寸溢出；100vw 比 100% 更可靠；fixed 最稳全屏方案；真全屏须 requestFullscreen() 且由用户手势触发。

直接用 100vh 和 100vw 最快，但 iOS Safari 滚动时地址栏收放会导致高度跳变——这不是 bug，是浏览器行为，必须用 JS 补偿或换 position: fixed。

为什么 height: 100% 常常失效

因为百分比高度依赖父容器有明确高度。如果 html 和 body 没设 height: 100%，或者中间某层用了 display: block 但没设高，div 的 height: 100% 就会退化为内容高度。

• 必须重置 html, body { margin: 0; padding: 0; height: 100%; }
• box-sizing: border-box 要加在根或目标元素上，否则 padding 或 border 会让实际尺寸超视口
• 滚动条宽度（约 17px）会被算进 100vw，但不会被 100% 计入——所以 100vw 更可靠

position: fixed 是最稳的全屏覆盖方案

适用于模态框、视频背景、Canvas 渲染等不随页面滚动、也不受父级 overflow 或 transform 干扰的场景。

• 写法简单：.fullscreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; }
• 不用管父容器是否定位，它只认视口
• iOS Safari 中若含 <input>，软键盘弹出可能让 100vh 失效，此时应监听 resize 事件并设 style.height = window.innerHeight + 'px'
• 记得加 z-index，否则可能被其他元素遮挡

真·浏览器全屏必须用 requestFullscreen()

CSS 再怎么撑也只是“视觉满屏”，只有调用原生 API 才能进入系统级全屏模式（F11 效果），并响应 fullscreenchange 事件。

立即学习“前端免费学习笔记（深入）”；

• 只能由用户手势触发（click、keydown），不能在 setTimeout 或 load 里直接调
• 必须确保元素已挂载：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 元标签禁缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• 慎用 min-height: 100vh 做布局容器——它无法阻止内容溢出，反而可能引发双滚动条

真正难的不是写出满屏样式，而是判断该用 CSS 视觉满屏，还是原生全屏 API；以及在 iOS 上要不要放弃 vh，改用 JS 实时同步高度。