height: 100% 失效的根本原因是父容器链存在 height: auto，导致浏览器无法计算百分比基准；必须显式设置 html、body 及所有祖先元素 height: 100%，或改用 padding-bottom 等比方案、js 动态适配。
iframe 的 height: 100% 不生效，根本不是 iframe 写错了，而是它压根没地方可“百分”——父容器链路上至少有一层高度是 auto，浏览器算不出 100% 等于多少像素。
为什么 height: 100% 在 iframe 上总失效
浏览器计算子元素百分比高度时，只看**直接父元素的 computed height**。只要父元素是 height: auto（默认值），子 iframe 的 height: 100% 就会被忽略，退化为约 150px 的默认高度。
-
html和body默认不占满视口，它们只是内容容器；漏掉其中任何一个的height: 100%，整条链就断了 - 某些 CSS reset（如 Normalize.css）会悄悄重置
html或body的height，导致你写了却没用 - Flex 容器里写
height: 100%也可能白搭：如果父项设置了min-height: 0或align-self: flex-start，拉伸行为就被禁用了 - 开发者工具里选中 iframe → “Computed” 面板 → 查
height值：如果是auto，说明包含块没生效；如果是具体像素（比如720px），才说明链路通了
快速修复：强制打通高度继承链
最直接有效的做法是显式给整个祖先链设高，尤其不能跳过 html 和 body：
- 必须加这段重置：
html, body { margin: 0; padding: 0; height: 100%; } - 如果 iframe 的直接父容器是普通
div，也要确保它有明确高度，比如：.iframe-wrapper { height: 100%; }或min-height: 600px - 避免仅靠内容撑开父容器（例如只写
padding或文字），否则它仍是height: auto，链路依然断裂 - IE11 下更严格：哪怕其他浏览器 OK，IE11 也要求 iframe 的**直接父元素**必须同时满足
height: 100%且 computed 值有效，否则无视
响应式场景下别硬刚 height: 100%
小屏、滚动、地址栏收起/展开等动态变化会让 height: 100% 和 100vh 行为不可控，iOS Safari 尤其明显。此时应放弃“高度继承”，改用 padding-bottom 技巧构建等比容器：
- 父容器设：
position: relative; width: 100%; padding-bottom: 56.25%; height: 0;（16:9 视频） - iframe 设：
position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 务必删掉 iframe 标签上的
height和width内联属性，否则与 CSS 冲突 - 这个方案不依赖同源、不需要 JS、兼容性极好，但只解决“比例缩放”，不解决“内容加载后真实高度变化”
内容动态变高时必须用 JS + 同源/跨域通信
如果 iframe 里页面内容是异步加载、折叠展开或高度会变（比如富文本编辑器、长表单），仅靠 CSS 无法响应。这时要分情况处理：
- 同源（协议、域名、端口全一致）：
iframe.onload后读取contentDocument.body.scrollHeight，再赋给 iframe 的height属性或内联 style - 跨域：
iframe内页面通过window.parent.postMessage()发送真实高度，父页监听message事件，校验event.origin后更新 iframe 高度 - 不要用
offsetHeight：它不含溢出内容；scrollHeight更准，但必须在 DOM 加载完成后读取，否则返回 0 - 动态内容持续变化时（如实时日志滚动），需在子页内部定期触发 postMessage，不能只 onload 一次
最容易被忽略的，是没打开开发者工具逐层点开看 computed height —— 很多人调了半天 CSS，其实问题早在 html 或第二层 div 就断掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
