height: 100%或50vh在小屏下失效，是因为父容器height: auto导致无高度参照，计算结果为0；ios safari对vh更敏感，地址栏收放或横竖屏切换时会瞬时错乱，使视频缩成一条线。
为什么直接写 height: 100% 或 50vh 在小屏下会失效
浏览器要求百分比高度必须有明确的父级高度作为参照，而响应式布局中常见父容器是 width: 100% + height: auto，导致 height: 100% 计算结果为 0。iOS Safari 尤其严格：地址栏收放、横竖屏切换时，vh 值会瞬时错乱，视频突然缩成一条线。
常见错误现象包括：
- iframe 只显示顶部几像素，下方大片空白或内容被裁剪
- 移动端加载后高度正常，但键盘弹出或滚动后 iframe 回退到默认 150px 高度
- 使用
aspect-ratio: 16/9后视频比例对了，但长页面（如带表单的嵌入页）底部被截断
用 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 上，防初始渲染塌陷
示例 CSS：
.video-iframe-wrap {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
overflow: hidden;
}
.video-iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
min-height: 200px;
}
跨域 iframe 内容高度远超比例时怎么办
当嵌入的是第三方管理后台、搜索页、或动态加载内容（比如带折叠面板的表单），真实高度可能远大于 16:9 推算值，padding-bottom 方案就会卡死高度、裁剪底部。
唯一可靠解法是 postMessage 跨域通信：
- 子页面在 DOM 加载完成后，向父页发送
{ type: 'resize', height: document.body.scrollHeight } - 父页监听
message事件，校验event.origin后设置iframe.style.height = height + 'px' - YouTube/Vimeo 等播放器不支持该机制——它们已内置响应式逻辑，应直接用其官方嵌入代码
- 注意：不能只 onload 发一次，需在内容变化后（如 AJAX 加载完成）再次发消息
全屏铺满视口时必须加的三样东西
如果目标是让 iframe 占满整个屏幕（比如嵌入后台系统），光靠比例容器不够，还得确保上下文完整：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须存在，否则 iOS Safari 会忽略vh -
html和body元素要设margin: 0; padding: 0; height: 100%，否则100vh容器可能被撑开或压缩 - 父容器用
position: fixed或absolute，配合top: 0; left: 0; width: 100vw; height: 100vh，并加overflow: hidden防滚动条干扰
容易被忽略的是：某些 CMS 或框架会在 body 上注入内联样式（如 min-height: 100vh），这会破坏 height: 100% 的继承链，必须手动重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
