height: 100% 不生效是因为百分比高度需父元素有明确高度，而 html 的父级（视口）默认不被当作有高度的容器；应改用 height: 100vh 或 min-height: 100dvh，并重置 margin/padding。
为什么 height: 100% 在 index.html 上不生效？
直接给 或 设 height: 100% 通常没反应，因为百分比高度依赖父容器有明确高度——而 的父容器是视口，但 CSS 默认不把视口当“有高度的父级”来继承。浏览器需要显式告诉它：“以视口为基准”。
用 vh 单位最直接可靠
vh（viewport height）是相对于视口高度的单位，100vh 就等于当前屏幕可视区域高度，不受父元素限制，也不依赖文档流高度计算。
常见写法：
html, body {
margin: 0;
padding: 0;
height: 100vh; /* 关键：不是 100% */
overflow-y: auto;
}
-
margin: 0; padding: 0必须加，否则默认边距会撑出滚动条 -
overflow-y: auto防止内容超长时被截断，同时保留滚动能力 - 如果只希望“最小撑满”，改用
min-height: 100vh更安全（尤其内容可能动态增长时）
遇到 iOS Safari 滚动时 100vh 被压缩怎么办？
iOS Safari 在地址栏收起/展开时会重算 vh，导致页面跳动或底部留白。这不是 bug，是它把地址栏高度也算进了视口变化里。
临时缓解方案（不完美但够用）：
- 改用
min-height: 100dvh（dvh是“dynamic viewport height”，Safari 16.4+ 支持） - 降级 fallback：
min-height: 100vh; min-height: 100dvh;，旧版忽略dvh - 完全规避：用 JS 监听
resize，动态设style.height = window.innerHeight + 'px'，但要注意防抖和 orientationchange
别混淆 100vh 和“全屏应用”的需求
如果你实际要的是“像 PWA 那样无地址栏、真正占满物理屏幕”，vh 解决不了——那是 manifest.json 和 display: "standalone" 或 "fullscreen" 的事，和 CSS 高度无关。
另外注意：
-
100vh包含状态栏（Android）、URL 栏（iOS），所以有时视觉上还是“差一截” - 嵌入 iframe 的页面，
vh以 iframe 容器为基准，不是顶层窗口 - 某些安卓 WebView 对
vh支持不稳定，测试时务必真机验证
真正麻烦的从来不是怎么写那行 CSS，而是得想清楚：你到底要“刚好填满当前可视区”，还是“不管用户怎么缩放/滚动都稳住底部”，后者往往得结合 JS 和媒体查询做兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
