结论是：用 display: flex + flex-direction: column + flex: 1 并配合 min-height: 0，可稳定解决90%后台管理纵向高度自适应问题；height: 100% 因依赖祖先显式高度易失效，而 flex: 1 通过分配剩余空间实现自适应，但必须设 min-height: 0 才能正常收缩。
直接说结论：用 display: flex + flex-direction: column + flex: 1，再加 min-height: 0，90% 的后台管理纵向高度自适应问题就解决了。写死 height: 100% 或靠 calc() 算剩余高度，基本都会在嵌套变深或内容动态加载后失效。
为什么 height: 100% 在后台布局里大概率不工作
后台页面常见结构是 → + ，而 height: 100% 要求**每一级父容器都必须有明确高度**才能逐层传递。但 和 height，只靠 min-height: 100vh 或 100%，结果就是中间某一层断掉， 拿不到“100%”的参照值，只能按内容撑开。
- 浏览器对
height: 100%的计算依赖祖先元素是否具有可计算的高度（非auto） -
vh单位虽能绕过部分层级限制，但窗口缩放、地址栏显示/隐藏会导致100vh不稳定（尤其移动端） - Vue/React 组件嵌套后，
height: 100%更容易因 Fragment 或无包裹节点中断继承链
flex: 1 是怎么吃掉剩余空间的
核心不是“它变高了”，而是“它被 flex 容器分配了剩余可用空间”。前提是父容器是 display: flex 且方向为 column，子项中至少有一个声明 flex: 1（等价于 flex: 1 1 0）。
-
flex: 1的第三个参数0表示“基准尺寸为 0”，即从零开始增长，而不是从内容高度开始拉伸 - 必须配
min-height: 0，否则子项默认min-height: auto，会拒绝压缩，导致flex: 1失效（尤其内部有overflow: auto或绝对定位时） - 如果多个子项都设
flex: 1，它们会均分剩余空间；若只想让一个占满，其余用固定高度或flex: 0 0 auto
典型写法：
.layout {
display: flex;
flex-direction: column;
min-height: 0; /* 关键：允许子项收缩 */
}
.header { height: 60px; }
.main { flex: 1; min-height: 0; overflow: auto; }
.footer { height: 40px; }
iframe 内容区高度自适应的实操要点
后台常用 iframe 加载不同模块，但 iframe 默认不随内容撑高，手动设 height 又无法响应内容变化。此时不能靠父容器 flex 布局“推高” iframe，而要让 iframe 自己感知内容高度并上报。
- 同域下：iframe 内部用
document.body.scrollHeight计算真实高度，通过window.parent调用父页函数传回，父页动态设iframe.style.height - 跨域下：必须用
postMessage通信，iframe 发送高度数据，父页监听并更新iframe.style.height，同时设iframe.style.minHeight = '0'防止 flex 失效 - 避免双滚动条：父容器设
overflow: hidden，iframe 内部自行处理滚动（html, body { overflow: auto }） - 首次加载常出现高度不准，建议加
setTimeout(..., 0)或监听load+DOMContentLoaded后再读取高度
容易被忽略的 min-height: 0 场景
这个声明看似简单，但在以下情况几乎必加，否则 flex: 1 就是摆设：
- 子项内有
overflow: auto或scroll—— 浏览器会把最小高度锁死为内容高度 - 子项包含绝对定位元素（如弹窗、提示框），它们脱离文档流，但父容器仍需按 flex 规则收缩
- 子项是 Vue/React 组件，内部用了
position: relative+height: 100%的组合，会隐式触发min-height: auto - 父容器本身是 flex 子项（比如左右布局中的右侧主区），那它的父级也得有
min-height: 0
一句话：只要 flex 子项需要“被压缩”或“不随内容撑高”，min-height: 0 就不是可选项，是必填项。漏掉它，整个纵向自适应逻辑就卡在第一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
