模态框高度不随内容撑开需用min-height与max-height组合：设min-height保小内容不塌缩，max-height用css变量限制上限，overflow-y: auto加在内容区实现局部滚动。
模态框高度不随内容撑开？检查 max-height 和 overflow 组合
默认情况下，用 height: 100% 或 height: 50vh 的模态框不会自动适配内容高度，尤其当内容少时留白多、内容多时被截断。根本原因是父容器高度未明确，或子元素溢出被隐藏。
正确做法是让模态框容器具备「最小可用高度」和「最大限制」双重约束：
-
min-height设为一个合理基线（如200px），保证小内容不塌缩 -
max-height用 CSS 变量控制（如--modal-max-height: 80vh），避免遮挡底部操作区 -
overflow-y: auto加在内容区（非整个模态框），滚动条只出现在内容区内部
用 --modal-height 变量实现三种常用模式
CSS 变量不是万能的——它只控制“设定值”，是否生效取决于你怎么用它。直接赋给 height 会强制固定高度，失去弹性；更实用的是把它作为 max-height 或 clamp() 的一部分。
常见场景与写法：
- 「自适应高度 + 上限」：用
max-height: var(--modal-max-height, 70vh)，内容短则收缩，长则滚动 - 「最小+上限区间」：用
height: clamp(240px, var(--modal-height, 60vh), 80vh)，兼顾可读性与屏幕安全区 - 「全屏但留边」：设
--modal-height: calc(100vh - 4rem)，变量本身含计算式，需确保父容器有高度上下文
height: 100% 失效？确认父级有明确高度来源
很多同学写了 height: var(--modal-height) 却没效果，不是变量错了，而是模态框的父容器（比如 .modal-overlay）没有高度依据。CSS 中百分比高度必须依赖「已知高度的祖先」，否则退化为 auto。
稳妥解法只有两个：
- 给最外层遮罩层加
height: 100vh（注意：100vh在 iOS Safari 中可能因地址栏缩放失准，可改用100dvh） - 不用百分比，改用
fit-content或max-content配合min-height，让高度由内容驱动
示例关键片段：
`.modal { min-height: 240px; max-height: var(--modal-max-height, 70vh); }
.modal-content { max-height: calc(var(--modal-max-height, 70vh) - 120px); overflow-y: auto; }`
移动端滚动卡顿、背景穿透？别只盯着高度变量
高度可调只是模态框的一半问题。iOS 上常出现「内容滚动时背景也跟着动」，或「手指松开后滚动突然停止」，这跟 position: fixed 容器内滚动行为有关，和 CSS 变量无关，但容易误判。
真正要动的地方是交互层：
- 模态框容器加
overscroll-behavior: contain，阻止滚动穿透到 body - body 在模态框打开时加
position: fixed; width: 100%（注意保存原始scroll-top，关闭后恢复） - 避免在
transform动画中同时修改高度变量，会引起重排，尤其低端 Android
变量本身无性能问题，但把它和 transition: height 搭配使用，就容易触发 layout —— 改用 scale 或 opacity 动画更稳妥。
高度变量只是开关，真正决定体验的是它在哪一刻被读取、和哪些布局属性联动、有没有避开移动端的渲染陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
