iframe自身不支持min-height，需通过父容器设min-height+iframe占满、js动态设height取max、跨域时子页主动传保底值三重保障实现最小高度。
iframe 本身不支持 min-height CSS 属性直接生效
因为 iframe 是替换元素（replaced element），其尺寸行为受 HTML height 属性和浏览器渲染规则双重约束。写 style="min-height: 400px;" 在多数浏览器里会被忽略——它只响应显式设置的 height 值或父容器的约束，不会像普通 div 那样触发最小高度逻辑。
正确实现“最小高度”的两种可靠方式
必须把“最小高度”逻辑落到可控制的层上，而不是指望 iframe 自身响应 min-height：
- 给
iframe的**直接父容器**设min-height，并让 iframe 占满该容器（height: 100%），同时父容器用display: block或flex确保高度可继承 - 在 JS 动态设置
iframe.style.height时，强制取最大值：Math.max(computedHeight, 400)—— 这是最常用、最可控的做法
例如同源场景下：
iframe.onload = () => {
const doc = iframe.contentDocument || iframe.contentWindow.document;
const height = Math.max(
doc.documentElement.scrollHeight,
doc.body.scrollHeight
);
iframe.style.height = Math.max(height, 400) + 'px';
};
跨域 iframe 的最小高度必须由子页配合保证
父页无法读取跨域 iframe 内容高度，所以“最小高度”不能靠父页兜底计算。必须由子页在发 postMessage 时主动带上保底值：
- 子页发消息不能只传
document.body.scrollHeight，而应传Math.max(document.body.scrollHeight, 400) - 父页收到后仍建议再套一层
Math.max(event.data.height, 400)，防子页漏处理 - 若子页高度为 0（如白屏、加载失败），父页应有 fallback：比如监听
iframe的onerror，然后设固定最小高
移动端 Safari 和旧版 Chrome 的特殊坑
某些 iOS Safari 版本（尤其 15.4–16.6）在 iframe 初始渲染时会错误报告 scrollHeight 为 0，即使内容已存在。这不是代码错，是渲染管线 bug：
- 必须加
setTimeout(() => { /* 读高度 */ }, 100)，不能只用setTimeout(..., 0) - 避免依赖
body.scrollHeight，优先读documentElement.scrollHeight - 如果子页含 Web Font 或图片懒加载，需等
document.fonts.ready和img.onload后再发高度消息
最小高度看似简单，但真正稳住它，得在父页 JS 计算、子页消息格式、CSS 容器约束三处同时设防——漏掉任何一环，滚动时就可能突然塌缩成一条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
