直接设 height: 100% 在 iframe 上大概率失效，是因为父容器高度为 auto 或未声明明确值，导致浏览器无法计算百分比基准，height: 100% 退化为无效声明，iframe 塌陷为默认 150px 或渲染异常。

为什么直接设 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 上，防初始渲染塌陷

跨域 iframe 内容高度远超比例时怎么办

当嵌入的是第三方管理后台、搜索页或带折叠面板的表单，真实内容高度可能远大于 16:9 推算值，padding-bottom 方案就会卡死高度、裁剪底部。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 唯一可靠解法是 postMessage 跨域通信：子页面在 DOM 加载完成后，向父页发送 { type: 'resize', height: document.body.scrollHeight }
• 父页监听 message 事件，校验 event.origin 后设置 iframe.style.height = height + 'px'
• 不能只 onload 发一次，需在内容变化后（如 AJAX 加载完成、面板展开）再次发消息
• YouTube/Vimeo 等播放器已内置响应式逻辑，应直接用其官方嵌入代码，不要自行套 postMessage

PDF 或视频类 iframe 的特殊处理要点

这类资源通常由浏览器原生 PDF 阅读器或播放器渲染，CSS 盒模型控制力有限，容易被内部工具栏、地址栏收放干扰。

立即学习“前端免费学习笔记（深入）”；

• PDF 嵌入务必加 URL 参数隐藏干扰项，例如：document.pdf#toolbar=0&navpanes=0&scrollbar=0
• YouTube/Vimeo 官方嵌入代码默认启用响应式，但需确保父容器有明确宽高约束，且禁用 frameborder（改用 CSS border: none）
• 所有 iframe 都应加 overflow: hidden 和 border: none，避免滚动条和边框破坏布局

实际项目里最容易被忽略的，是「内容动态变化后是否触发了高度重算」——静态比例容器骗不过折叠菜单、分页加载或表单验证提示，这时候光靠 CSS 就不够了。