首屏溢出主因是100vh按视口总高（含滚动条）计算，而padding在内容区外叠加，导致总高超限；需清除body默认margin、避免height+padding组合，改用top/bottom自动计算高度。
首屏溢出不是 height: 100vh 写错了，而是它和 padding 在不同计算基准上“打架”：100vh 按视口总高算，padding 却在内容区外叠加，总高 = 视口高 + padding，必然超限。
100vh 的高度基准包含滚动条占位
100vh 是按浏览器视口的 total height 计算的，这个值把滚动条高度（Windows 默认约 17px，macOS 隐藏但 DOM 中仍计入）也包进去了。比如视口报告 100vh = 800px，实际可用内容高度可能只有 783px；此时再加 padding-bottom: 20px，元素总高就变成 820px —— 超出可视区域，触发垂直滚动条。
- 这种溢出在 Windows 桌面端最明显，因为常驻滚动条始终占用空间
- macOS 或 iPad Safari 虽然滚动条默认隐藏，但
100vh的计算逻辑不变，仍会多出“隐形溢出” -
box-sizing: border-box对此完全无效——它只管 padding 是否计入 height，不改变 100vh 的基准定义
padding 加在 100vh 元素内部时，尺寸叠加不可逆
当一个 div 同时设了 height: 100vh 和 padding: 40px，它的总高度 = 100vh + 80px（上下 padding），哪怕父容器是 html 或 body，也无法压缩或裁剪——因为 height 是硬性约束，padding 是强制外延。
- 常见误操作：
height: 100vh; padding: 40px;→ 实际撑开页面，首屏底部留白或滚动 - 更隐蔽的是伪元素或子元素自带 padding（如
input、textarea），它们在 100vh 容器里也会推高总高 - 用
calc(100vh - 80px)手动减去 padding 是脆弱方案：滚动条宽度动态变化、缩放比例影响、设备差异都会让这个差值失效
绝对定位 + 100vh + padding 是三重风险组合
写 position: fixed; top: 0; height: 100vh; padding: 20px; 看似全屏，实则危险：fixed 元素的 height: 100vh 仍按视口总高算，而 padding 又额外加在内容区外，同时顶部导航栏的 top 偏移若没参与计算，还会进一步错位。
- 典型错误：
top: 60px; height: 100vh;→ 实际覆盖区域从 y=60px 开始，向下延伸满屏，底部必然溢出 - 正确做法是放弃
height: 100vh，改用top: 60px; bottom: 0;，让浏览器自动计算剩余高度 - 如果必须保留 padding，应在内部嵌套一层子容器：
padding加在子容器上，外层 fixed 元素只负责定位和尺寸控制
body 默认 margin 和 100vh 不兼容
即使你给 body 设了 height: 100vh，浏览器默认的 body { margin: 8px; } 依然存在——这 16px 的外边距会让整个 body 内容区下移并撑高，导致首屏出现“看不见的滚动条”。
- 必须显式清除：
body { margin: 0; }，且这条规则要确保不被框架样式覆盖 - 仅清
margin不够，还要检查html是否有border或padding，它们同样会干扰 100vh 的对齐 - 验证方式：打开开发者工具，选中
body，切到「Computed」面板，确认height确实是精确的100vh值，且margin、padding、border全为 0
真正稳定的首屏控制，靠的不是堆砌 100vh 和 padding，而是分层：定位用 top/bottom，尺寸交由浏览器自动推导，留白通过内层容器承载。任何手动计算的 calc() 都会在滚动条宽度、缩放、iframe 嵌入等场景下失效——这点最容易被忽略，但恰恰是线上首屏抖动、滚动条闪现的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
