最简可靠写法是 body { margin: 0; } 和 .fullscreen { height: 100vh; }，因 height: 100% 依赖父级高度且受默认 margin 影响而常失效，而 100vh 直接基于视口更可控，但需注意 ios safari 地址栏变化导致的跳动及 flex/grid 容器中的对齐问题。
直接用 height: 100vh 就能实现视觉上“一行 CSS 全屏铺满”，但真正可靠、不踩坑的写法需要同时处理文档流和默认边距。
为什么 height: 100% 常常失效？
因为 height: 100% 是相对于父容器高度计算的，而 HTML 和 body 默认没有显式高度，且存在默认 margin。浏览器会按“内容撑开”逻辑渲染，导致 100% 计算结果为 0。
常见错误现象：div { height: 100%; } 完全没高度，元素塌陷；或者只占内容区，顶部/底部留白。
-
html和body必须设height: 100%（或100vh），否则子元素无法继承 - 必须清除
body默认的margin（通常是 8px） - 若页面有滚动条，
100vh会包含滚动条宽度，可能造成轻微错位（多数场景可忽略）
最简可靠的一行写法：用 100vh + 清除 margin
这不是“纯一行”，但关键样式只需一条声明 + 一个重置，实际开发中几乎总要加这两句：
body { margin: 0; }
.fullscreen { height: 100vh; }
使用场景：登录页背景图、引导页、单页应用根容器、模态层遮罩。
- 不用管父级高度是否设置，
100vh直接基于视口 - 兼容性好（IE9+ 支持
vh），比100%更直观可控 - 如果元素需同时铺满宽度，补一句
width: 100vw（但多数情况block元素默认已占满）
遇到 flex 或 grid 布局时怎么保持全屏？
当父容器是 display: flex 或 display: grid，子元素即使设了 100vh 也可能被 flex/gird 的对齐行为压缩或拉伸。
典型问题：.container { display: flex; } .fullscreen { height: 100vh; } → 高度被忽略，只按内容高显示。
- 给父容器加
min-height: 100vh（推荐），而非依赖子元素撑高 - 或给子元素加
align-self: stretch（flex） /align-self: stretch; justify-self: stretch（grid） - 避免在 flex 容器里仅靠
height: 100vh控制子项高度——优先让容器自己全屏
移动端 Safari 中 100vh 的坑
iOS Safari 在地址栏收起/展开时会动态调整 vh 单位值，导致页面“跳动”。比如初始加载时 100vh 包含地址栏，滚动后地址栏隐藏，100vh 变大，内容被顶出视口。
这不是 bug，而是 Safari 对“视口”的定义更严格（含 UI 栏）。真实项目中不能只依赖 100vh。
- 方案一：用 JavaScript 动态设高度：
document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');，CSS 中用height: calc(var(--vh, 1vh) * 100); - 方案二：改用
min-height: 100vh+height: auto，允许内容自然延伸，避免强制截断 - 方案三：用
100dvh（dynamic viewport height）——Chrome 105+/Safari 16.4+ 支持，会自动响应地址栏变化，但旧版本需降级
真正难的不是写那一行 CSS，而是判断当前场景要不要它、有没有被父级布局或移动端行为悄悄覆盖。先清 body margin，再看容器是否 flex/grid，最后查 iOS 版本要不要上 dvh —— 这几步漏掉任何一环，都可能让“全屏”变成半屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
