根本原因是html和body未设height:100%，导致百分比高度链路中断；同源用onload+scrollHeight加setTimeout延迟读取，跨域必须postMessage通信，响应式固定宽高比场景可用padding-bottom方案。
html和body没设height:100%是根本原因
浏览器里height: 100%不是“占满可视区”，而是“占满父容器计算出的高度”。而html和body默认是height: auto，导致整条高度链路从根就断了——哪怕你给iframe写了height="100%"或style="height:100%"，最终都算不出具体像素值，退回到约150px的默认高度。
必须显式声明：
html, body { height: 100%; margin: 0; padding: 0; }- iframe的直接父容器也得有明确高度，比如
height: 100%、min-height: 600px，或用flex: 1配合display: flex父容器 - 避免用
min-height代替height——百分比高度只认height属性
同源iframe用onload+scrollHeight最简可行
只要iframe的src和父页协议、域名、端口完全一致（如都是https://a.com/page.html），就能直接读子页DOM。关键不是写height: 100%，而是等加载完成再取真实内容高度。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 在
iframe标签写完就立刻读contentDocument.body.scrollHeight，此时DOM还没渲染，返回0 - 子页
body有默认margin: 8px，导致高度多出8px - 没加
setTimeout(() => {}, 0)，浏览器重排未完成就读高，结果偏小
推荐写法：
ifr.onload = () => {
setTimeout(() => {
const doc = ifr.contentDocument;
const height = Math.max(
doc.documentElement.scrollHeight,
doc.body.scrollHeight
);
ifr.style.height = Math.max(height, 300) + 'px';
}, 0);
};
跨域iframe必须用postMessage通信
跨域时contentDocument被拦截，scrollHeight根本读不到。postMessage不是优化项，是唯一合规路径——子页主动上报，父页校验后设高。
容易踩的坑：
- 父页不校验
e.origin就执行ifr.style.height，存在XSS风险 - 子页在
DOMContentLoaded阶段就发消息，此时document.body.scrollHeight可能不准；应等window.addEventListener('load', ...)触发后再计算 - Vue/React项目中，消息必须在
mounted或useEffect里发，避开SSR阶段
父页监听示例：
window.addEventListener('message', e => {
if (e.source !== ifr.contentWindow || e.origin !== 'https://trusted.com') return;
if (e.data.type === 'resize') {
ifr.style.height = e.data.height + 'px';
}
});
响应式场景下padding-bottom才是真解
当iframe内容宽高比固定（如YouTube视频）、且不需要精确匹配内容高度时，padding-bottom方案比JS更轻量、兼容性更好，也不依赖同源。
核心逻辑：把高度“转嫁”给padding-bottom（它支持百分比，且基于父容器宽度计算），再用绝对定位让iframe填满。
- 父容器设
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 - 4:3视频用
padding-bottom: 75%，比例公式：(height ÷ width) × 100%
注意：这个方案对动态变高的内容（如折叠菜单、分页加载）无效，底部会被裁剪——此时仍需postMessage。
