直接设 height: 100% 在 iframe 上无效，因父容器需有明确高度；推荐用 padding-bottom + absolute 定位实现响应式比例容器；动态内容需 postMessage 通信动态调整高度；PDF/地图等应使用官方嵌入并配置参数。
为什么直接设 height: 100% 在 iframe 上无效
浏览器对百分比高度有硬性要求：父容器必须有明确的 height 值（不能是 auto 或未声明），否则 height: 100% 计算结果为 0。而响应式布局中，外层容器常写 width: 100%; height: auto，这就导致 iframe 塌陷为默认 150px —— 尤其在 iOS Safari 横竖屏切换或键盘弹出时，会瞬间缩成一条线。
用 padding-bottom + position: absolute 构建比例容器
这是目前兼容性最好、纯 CSS、不依赖同源、无需 JS 的方案。核心是把“高度”转嫁给 padding-bottom（它支持基于父容器宽度的百分比计算）：
- 外层容器设
position: relative、width: 100%、height: 0、padding-bottom: 56.25%（16:9）或75%（4:3） -
iframe设position: absolute、top: 0、left: 0、width: 100%、height: 100% - 务必移除
iframe标签上的width和height内联属性，否则会覆盖 CSS - iOS Safari 需额外加
min-height: 200px到iframe上，防初始渲染塌陷
动态内容高度远超比例时怎么办
当嵌入的是第三方管理后台、搜索页或带折叠面板的表单，真实内容高度可能远大于 16:9 推算值，padding-bottom 方案就会卡死高度、裁剪底部：
- 唯一可靠解法是
postMessage跨域通信：子页面在 DOM 加载完成后，向父页发送{ type: 'resize', height: document.body.scrollHeight } - 父页监听
message事件，校验event.origin后设置iframe.style.height = height + 'px' - 不能只在
onload发一次，需在内容变化后（如 AJAX 加载完成、面板展开）再次发消息 - YouTube/Vimeo 等播放器已内置响应式逻辑，应直接用其官方嵌入代码，不要自行套
postMessage
PDF 或地图类 iframe 的特殊处理
这类资源由浏览器原生渲染或平台托管，CSS 盒模型控制力有限，容易被内部工具栏、地址栏收放干扰：
立即学习“前端免费学习笔记（深入）”；
- Pdf 嵌入务必加 URL 参数隐藏干扰项，例如：
document.pdf#toolbar=0&navpanes=0&scrollbar=0 - 谷歌地图等应使用官方嵌入代码，并确保父容器有明确宽高约束；禁用
frameborder（改用border: none） - 所有
iframe都应加overflow: hidden和border: none，避免滚动条和边框破坏布局 - 最容易被忽略的，是「内容动态变化后是否触发了高度重算」——静态比例容器骗不过真实 DOM 高度波动
