弹窗中height:100%失效，根本原因是其包含块（如position:fixed的视口或未设高的flex父容器）无明确高度；需确保html、body及所有中间父级显式设height:100%或改用flex:1。
弹窗组件里 height: 100% 失效，几乎总是因为它的父容器（比如 .modal-overlay 或 body）没有明确高度上下文——不是你漏写了，是浏览器根本算不出“100% 等于多少像素”。
为什么弹窗的父级容器常是 height: auto？
弹窗通常用 position: fixed 或 position: absolute 脱离文档流，它的“包含块”不再是视觉上的父元素，而是最近的 position: relative/absolute/fixed 祖先。如果这个祖先没设 height，或者压根没写 position，那包含块就回退到视口（viewport），而视口本身默认不提供可继承的高度值。
-
position: fixed的弹窗，其包含块是视口，但html和body若未显式设height: 100%，视口高度无法向下传递 - 用
display: flex做弹窗容器时，若父级（如.modal-wrapper）只写了display: flex却没设height或min-height，它自身仍是height: auto - 某些 UI 框架（如 Ant Design、Element Plus）的弹窗 wrapper 默认加了
min-height: 0，这会抑制align-items: stretch，导致子项height: 100%失效
开发者工具里怎么快速定位断点？
打开 DevTools → 选中弹窗最内层内容区域（比如 .modal-body）→ 切到「Computed」面板 → 找 height 值：
- 如果是
auto，说明某一层父级没传下高度；往上逐层点击父节点，直到找到第一个height: auto的元素 - 重点盯：弹窗最外层容器（如
.modal）、遮罩层（.modal-overlay）、body、html - 特别注意：某些框架会在
body上动态加style="overflow: hidden"，但没同步补height: 100%，导致链路在body就断了
Flex 布局下别硬套 height: 100%
弹窗内部常用 Flex 排版，但 height: 100% 在 Flex 子项里极易失效，尤其 Safari 14–15.6 有引擎级忽略问题。更可靠的做法是：
- 给弹窗主体容器（如
.modal-content）设display: flex; flex-direction: column; - 让内容区（如
.modal-body）用flex: 1，而不是height: 100% - 若子项被框架重置了
min-height: 0，需显式覆盖：min-height: auto - 避免同时写
height: 100%和flex: 1，二者逻辑冲突，Chrome 可能按后者，Safari 可能直接忽略前者
真正容易被忽略的，是弹窗往往嵌套在动态插入的 DOM 节点里（比如挂载到 document.body 底部），它的父级可能根本不是你写的 CSS 作用域——得手动检查运行时实际 DOM 结构，而不是只看源码里的 class 层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
