必须用 padding-bottom + position: absolute 构建响应式容器，否则 height: 100% 或 vh 在小屏下因父容器高度为 auto 而失效；动态内容需 postmessage 通信适配真实高度。
直接给 iframe 设 height: 100% 或 height: 50vh 在小屏下失效，本质是父容器没提供可参照的高度上下文——必须用 padding-bottom + position: absolute 构建响应式容器，否则所有高度设置都会被忽略。
为什么 height: 100% 在小屏下不生效
浏览器要求百分比高度的元素，其父级必须有明确高度（非 auto），而响应式布局中父容器通常设 width: 100%、height: auto，导致子 iframe 的 height: 100% 计算结果为 0。iOS Safari 尤其严格，连 vh 单位在地址栏展开/收起时也会错乱。
-
height: 600px固定值 → 小屏溢出或留白 -
height: 50vh→ 滚动时视口高度变化，视频突然缩放或错位 -
aspect-ratio: 16/9→ 不读取内容真实高度，仅推算比例，对 YouTube 等有效，但无法解决“内容加载后变高”的场景
必须用 padding-bottom 实现等比缩放
这是目前兼容性最好、无需 JS、不依赖同源的方案，核心是把高度“转嫁”给 padding（它支持百分比且基于父容器宽度计算）。
Product Manager Skills
下载
一款AI工具，主要用于产品经理技能，适用于 Claude Code、Codex、Cursor 和 Windsurf。涵盖 SaaS 指标诊断、PRD 评审、路线图规划、需求探索，以及面向产品经理的职业转型辅导等，适合需要提升相关任务效率的用户。
- 父容器设
position: relative、width: 100%、padding-bottom: 56.25%（16:9）、height: 0 -
iframe设position: absolute、top: 0、left: 0、width: 100%、height: 100% - 比例值 = 高 ÷ 宽 × 100%，4:3 视频用
padding-bottom: 75% - 务必移除
iframe标签上的height和width内联属性，否则会与 CSS 冲突
跨域 iframe 内容高度变化时，padding-bottom 仍不够
如果嵌入的是第三方表单、搜索页、或动态加载内容（如某些后台管理界面），其真实高度可能远超 16:9 比例，此时 padding-bottom 会卡死高度，底部被裁剪。
- 唯一可靠解法是
postMessage跨域通信：子页面在 DOM 加载完成后，向父页发送{ type: 'resize', height: document.body.scrollHeight } - 父页监听
message事件，拿到高度后动态设iframe.style.height = height + 'px' - 子页面需确保同源策略允许通信（通过
event.origin校验） - 注意：YouTube/Vimeo 等播放器不支持该机制，它们自身已封装好响应式逻辑
iOS 上额外要加的两行 CSS
iOS Safari 对 iframe 的渲染有特殊限制，尤其在横竖屏切换或键盘弹出时容易回退到默认 150px 高度。
- 给
iframe加min-height: 200px（防 iOS 初始渲染塌陷） - 给父容器加
-webkit-overflow-scrolling: touch（提升滚动性能，避免 iframe 内部滚动条卡顿） - 不要用
transform: scale()强制缩放，会导致点击区域偏移
真正难的不是写对那几行 CSS，而是判断当前嵌入的内容是否“高度稳定”：YouTube 可以纯 CSS 解决；自己托管的 HTML 页面就得上 postMessage；而用户生成内容（比如评论区嵌入的视频页）可能两者都要备着——因为无法预知对方页面会不会动态插入 DOM。
