html5怎么铺满屏_html5用width:100vw height:100vh让元素铺满屏幕【布局】

100vw/100vh仅占满视口，受滚动条、iOS地址栏动态变化、缩放及父容器限制影响易出现溢出或留白；推荐用min-height: 100vh; min-height: 100dvh;兼容处理，必要时辅以JS动态设置height。

用 width: 100vw; height: 100vh; 确实能让元素视觉上“铺满整个屏幕”，但要注意它只是占满视口（viewport），不是真正意义上的“铺满屏”——比如滚动条、缩放、移动端 Safari 地址栏隐藏/显示、iframe 嵌套等场景下，实际表现可能和预期不一致。更稳妥的方案是结合语义、响应式逻辑与少量 JS 辅助。

为什么 100vw/100vh 有时“没铺满”或“溢出”？

常见原因：

• 滚动条占用空间：100vw 包含垂直滚动条宽度（如 17px），导致内容实际超出视口，触发横向滚动；
• 移动端地址栏动态变化：Safari/Chrome 在 iOS 上滑动时地址栏收起，100vh 不会自动重算，造成底部留白或遮挡；
• 缩放或字体放大：用户缩放页面后，vw/vh 单位按初始视口计算，布局可能错位；
• 父容器限制：如果父元素有 overflow: hidden 或 transform，可能裁剪子元素，即使它写了 100vh。

更可靠的全屏方案（纯 CSS）

优先使用以下组合，兼容性好且无需 JS：

• 根元素设为视口尺寸：
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
  再让目标元素 height: 100%; 继承即可；
• 用 min-height: 100vh 替代 height：
  避免内容少时撑不满、内容多时被截断；加 min-height: 100dvh;（推荐）可适配移动端动态视口；
• 现代推荐：使用 dvh 单位（dynamic viewport height）：
  height: 100dvh; —— 浏览器会实时响应地址栏显隐，iOS Safari 16.4+、Chrome 105+ 支持；

需要精确铺满？用 JS 补充计算（轻量级）

当必须严格贴合物理屏幕（如全屏背景图、游戏画布、WebGL 容器），可监听 resize 并更新高度：

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

• 获取真实可用高度：
  const realHeight = window.innerHeight;
• 绑定到元素 style：
  element.style.height = realHeight + 'px';
• 加上防抖和 resize 监听，避免频繁触发；
• 注意：仅在必要时使用，多数布局用 100dvh + min-height 已足够。

实际写法示例（推荐组合）

一个兼顾兼容性与现代特性的全屏容器：

.fullscreen {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  box-sizing: border-box;
}

这样既 fallback 到传统 vh，又在支持的浏览器中启用动态视口，同时用 min-height 防止内容不足时塌陷。