height: 100vh 单独用在 body 或 html 上无法可靠实现全屏背景图且无滚动条，因其不解决默认 margin 留白、不保证视口覆盖、易致移动端裁剪或滚动；必须重置 html, body { margin: 0; padding: 0; }，html 设 height: 100%，背景图优先绑定 html 元素并配 background-size: cover，禁滚动应 js 动态控制而非 css 硬设 overflow: hidden。
直接说结论：height: 100vh 单独用在 body 或 html 上，**无法可靠实现“全屏背景图且无滚动条”**——它既不解决默认边距导致的留白，也不保证背景图真正覆盖整个视口，还可能在移动端触发意外滚动或裁剪。
为什么 height: 100vh 在 body 上基本无效
body 默认有 margin（通常 8px），且它的高度由内容撑开，不是继承自视口。即使设了 height: 100vh，浏览器仍会按内容高度渲染，背景图只覆盖“内容区域”，而非整个屏幕。
- 必须同时重置
html, body { margin: 0; padding: 0; } -
html必须设height: 100%，否则body的100vh会失效（部分浏览器解析为“100vh 相对于父容器”，而父容器没高） - 仅靠
height: 100vh无法防止内容溢出——如果文案很长，body高度会突破 100vh，滚动条照常出现
真正要覆盖全屏，background-size: cover 必须作用在谁身上
背景图能否铺满，取决于它所依附的元素是否真正占满视口。最稳做法是把背景图交给 html 元素，而不是 body：
-
html天然是根容器，不受内容高度影响，background-size: cover能稳定作用于整个 viewport - 避免给
body设background，尤其当它有子元素浮动、flex 或绝对定位时，容易造成背景“断层” - 示例写法：
html { background: url('bg.jpg') no-repeat center center; background-size: cover; }
如何彻底禁用滚动条又不破坏可用性
设 overflow: hidden 在 html 或 body 上，看似能去滚动条，实则埋雷：
- 它会截断焦点元素（如表单输入框获焦后无法滚动到可视区）
- 键盘
Tab导航可能卡死，屏幕阅读器跳过被裁内容 - iOS Safari 中，软键盘弹出会推高视口，但
100vh不更新，导致背景图被顶出、内容不可见 - 真需要临时禁滚动（比如模态框打开时），应 JS 动态加
style="overflow: hidden"到body，并记录scrollY，关闭时恢复
最容易被忽略的一点：全屏背景和滚动控制是两件事。背景图铺满靠的是元素尺寸 + background-size + 定位；是否滚动靠的是内容高度与容器 overflow 的组合——混在一起硬塞 height: 100vh + overflow: hidden，等于用胶带修发动机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
