最稳定方案是用 padding-bottom + absolute 实现宽高比锁定：父容器设 position: relative、height: 0、padding-bottom（如16:9为56.25%），iframe 设 absolute、top:0、left:0、width:100%、height:100%，并移除html中width/height属性。
用 padding-bottom + absolute 实现宽高比锁定
这是最稳定、不依赖 JS、兼容所有现代浏览器的响应式方案，核心是放弃直接控制 iframe 的 width 和 height 属性，改用父容器撑出比例空间。
- 必须把
iframe包在一个div里（比如 class="responsive"），这个 div 才是真正做比例控制的主体 -
.responsive设position: relative、height: 0、padding-bottom: 56.25%（16:9），这个百分比值 = 高 ÷ 宽 × 100，比如 4:3 就是75% -
.responsive iframe必须设position: absolute、top: 0、left: 0、width: 100%、height: 100%，否则比例会失效 - 删掉 HTML 中
iframe标签自带的width和height属性（如width="640" height="360"），它们会被 CSS 覆盖且干扰计算
为什么直接写 width:100%; height:100% 不行？
单独给 iframe 写 width: 100%; height: 100% 是无效的——因为它的父容器默认没有高度，height: 100% 在 CSS 中要求父级有明确高度值，而普通块级元素高度由内容撑开，iframe 又不会反向撑高父容器，结果就是 height: 100% 算出来是 0。
- 常见错误：只加
.responsive { width: 100%; padding-bottom: 56.25% }，但忘了设height: 0，导致 padding-bottom 没生效（它依赖 height 为 0 才按宽度算百分比） - 另一个坑：父容器外层有
display: flex或display: grid，可能让.responsive的height: 0被重置，此时要加align-items: flex-start或显式设min-height: 0
视频类 iframe 要额外注意滚动条和全屏行为
YouTube、Vimeo 这类视频 iframe 默认带 scrolling="no"，但某些版本浏览器仍可能在 iOS 或安卓上出现横向滚动条，或全屏后比例错乱。
- 在
iframe上强制加scrolling="no"属性（HTML 属性，不是 CSS）能压制部分滚动条 - CSS 中补一句
.responsive iframe { display: block; }，避免行内元素默认的基线对齐留白 - 如果全屏后宽高比崩了，说明视频服务商 JS 动态改了 iframe 尺寸，这时得配合
allow="fullscreen"和allowfullscreen（两者都写更稳妥）
需要动态高度时，CSS 方案就到头了
上面所有方法都只能维持固定宽高比，无法根据 iframe 内容真实高度伸缩。比如嵌一个报表页面，内容从 300px 拉到 2000px，CSS 做不到自动拉伸——这必须靠 JS 监听子页面高度变化并通信。
- 同域：可直接读
iframe.contentDocument.body.scrollHeight，但要注意load事件只触发一次，SPA 页面后续路由跳转不会再次触发 - 跨域：必须用
window.postMessage让子页面主动上报高度，父页面监听message事件再更新iframe.style.height - 别自己手写通信逻辑，用
iframe-resizer库更省事，它已处理好 resize 观察、节流、嵌套 iframe、iframe 重载等边界情况
iframe.style.height，就会破坏 position: absolute 下的 100% 高度计算，整个比例布局就垮了。要么纯 CSS 锁比例，要么纯 JS 控高度，中间状态基本不可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
