height: auto 由内容撑开高度，height: 100% 需父容器有明确高度才能生效；100vh 更可靠但不随内容伸缩，flex 中 height: 100% 常因拉伸机制失效，绝对定位下则相对最近定位祖先计算。
height: auto 和 height: 100% 的行为差异在哪
height: auto 是默认值，元素高度由内容撑开；height: 100% 是相对计算，必须依赖父容器有明确高度（非 auto）才能生效。很多人写 height: 100% 却没效果，根本原因就是父级高度没“落地”——比如 html 和 body 默认是 height: auto，不会自动占满视口。
常见错误现象：
- 设置了 height: 100%，但元素高度为 0 或只有一行高
- 在 Flex 或 Grid 容器里误以为 height: 100% 总能填满
- 若父容器高度是
auto，子元素设height: 100%等价于height: 0 -
height: auto不会受父容器高度限制，但可能被max-height或overflow截断 - 在现代布局中，
height: 100%往往不如flex: 1或min-height: 100vh可靠
想让元素填满视口高度，该用 vh 还是 %
填满整个屏幕高度，优先用 height: 100vh，而不是 height: 100%。因为 vh 是视口单位，不依赖祖先链，也不怕父级没设高度。
使用场景：
- 全屏轮播图容器
- 单页应用的主内容区（需滚动时用 min-height: 100vh）
- 登录页居中卡片需要“撑满剩余空间”
-
100vh包含浏览器地址栏高度（Safari iOS 有兼容问题，可能溢出） - 移动端 Safari 中，地址栏收起/展开会触发
vh值变化，导致布局跳动；可改用100dvh（支持较新） -
height: 100%在嵌套深、父级高度动态变化时极难调试；vh更直接，但也更“死板”，不随内容伸缩
Flex 布局下 height: 100% 为什么经常失效
Flex 容器里的子项，默认主轴方向拉伸由 flex 属性控制，height 被忽略。哪怕父容器是 display: flex 且设了 height: 500px，子元素写 height: 100% 依然无效。
常见错误现象：
- Flex 容器内一个子元素设了 height: 100%，但高度只有内容高
- 用 align-items: stretch 拉伸，却发现某些子项没被拉满
- Flex 子项的“拉伸”只对未设置
height（或设为auto）的元素生效；一旦写了height: 100%，反而可能破坏 stretch 行为 - 真正想填满容器高度，应去掉
height，改用flex: 1或align-self: stretch - 如果容器本身高度是
auto，即使加flex: 1，子项也不会凭空变高——flex 拉伸的前提仍是容器有确定高度
height: 100% 在绝对定位中的实际表现
绝对定位元素设 height: 100%，是相对于它的 **最近的定位祖先**（即 position 为 relative、absolute 或 fixed 的父级）的高度，不是 viewport，也不是普通流中父容器。
使用场景：
- 模态框遮罩层（position: fixed + height: 100%）
- 卡片内绝对定位的图标按钮，希望随卡片高度变化
- 若没有定位祖先，
height: 100%会回退到初始包含块（通常是 viewport），但行为不稳定，尤其在 iframe 或嵌套上下文中 - 更稳妥的做法：给定位祖先显式设
height（如min-height: 200px），再让子元素用height: 100% - 注意
top/bottom同时设置时，height会被覆盖——浏览器按top+bottom计算高度，忽略height声明
最常被忽略的一点：高度自动填充从来不是单靠一个 CSS 声明就能搞定的事。它本质是盒模型、定位上下文、布局模式三者共同作用的结果。写 height: 100% 前，先确认父级是否真有“可被继承的高度”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
