height: 100vh未填满屏幕的根本原因是浏览器对视口高度定义不一致：iOS Safari中vh随地址栏动态变化，Chrome中需父元素设height: 100%才能继承，且html/body需重置margin/padding并配合viewport-fit=cover。
为什么height: 100vh有时没填满整个屏幕
直接写 height: 100vh 看似合理，但常遇到顶部留白、底部滚动条、或在移动端 Safari 中被地址栏遮挡——根本原因不是 CSS 写错了，而是 vh 单位在不同浏览器中对“视口高度”的定义不一致。iOS Safari 的 100vh 会随地址栏收起/展开动态变化，导致背景突然跳动；而 Chrome 桌面端若父元素没设 height，子元素的 100vh 可能被忽略（尤其当它嵌套在未设高的 div 里）。
- 确保根级容器（如
html、body）没有默认 margin 或 padding，加margin: 0; padding: 0; - 给
html和body显式设置height: 100%，再让目标元素用height: 100vh，避免继承链中断 - 移动端需额外加
viewport元标签：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">，否则 iOS 会强制留出安全区
background-color全屏填充时要不要用min-height代替height
用 height: 100vh 是刚性控制，内容超长时会被截断；而 min-height: 100vh 更稳妥：既保证至少铺满一屏，又允许内容自然撑开。实际项目中，除非明确要求“严格一屏且禁止滚动”，否则优先选 min-height。
- 如果背景色需覆盖整个内容区域（比如页脚固定在底部），用
min-height: 100vh+display: flex; flex-direction: column配合flex: 1给主内容区更可控 - 若只是单纯铺色（无内容或内容极少），
height: 100vh足够，但记得加overflow: hidden防止意外滚动条 - 注意：
min-height在 IE11 中支持良好，但老版 Android WebView 对vh支持差，可降级为min-height: 100%并确保父级有高度
用background简写属性时容易漏掉的关键点
很多人写 background: #333; 就以为完事了，但这个声明会重置所有背景相关属性，包括 background-attachment、background-origin、background-clip。一旦后续加了 background-image 或需要响应式调整，就可能出问题。
- 纯色背景推荐用
background-color: #333;单独设置，不碰其他背景子属性 - 如果必须用简写，确认是否需要
background-size: cover或background-position: center—— 这些不会被单色覆盖，但若之后叠加图片就得显式重写 - 在
:root或 CSS 变量中定义主题色时，别用background简写赋值，改用--bg-color: #333;，避免变量复用时隐式污染
移动端 Safari 中100vh跳动的临时修复方案
iOS Safari 的 100vh 会随地址栏显示/隐藏改变数值（比如从 667px → 736px），导致背景色块“上蹿下跳”。这不是 bug，是设计行为，但用户感知极差。目前没有纯 CSS 方案能完全消除，只能缓解。
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 动态计算并设内联样式：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后 CSS 中用height: calc(var(--vh, 1vh) * 100) - 更轻量的做法：加
@supports (height: 100vh)媒体查询，对支持vh的设备用100vh，不支持的回退到100%+position: fixed - 注意：不要监听
resize频繁重设，iOS 下会触发多次，建议节流或只在orientationchange时更新
实际项目里，最常被忽略的是 html 和 body 的默认样式清理，以及移动端 viewport-fit=cover 的缺失——这两点不处理，后面所有 vh 相关操作都可能失效。
