embed height="100%"塌陷为0是因为父容器高度为auto，缺乏明确像素基准；必须给父容器设min-height或height，且统一用CSS控制高度、声明type="application/pdf"并避免在flex容器中直接使用。
embed height="100%" 为什么总是塌陷成 0？
因为 height="100%" 在 <embed> 上根本无效 —— 它依赖父容器有明确高度，而绝大多数页面里，<body> 或直接父 <div> 高度是 auto 的。浏览器不会“猜”你想要多高，只会按内容撑开或默认为 0。
常见现象：写 <embed src="a.pdf" width="100%" height="100%">，结果只看到一条细线或完全空白；DevTools 里检查 computed height 确实是 0px。
- 别指望
height="auto"：所有主流浏览器都不支持该值，会忽略或降级为 0 - 移动端 Safari 对
<embed>的 height 解析极不稳定，建议彻底回避 - 必须给父容器设
min-height（比如min-height: 500px）或固定height，否则<embed>没有参照基准
用 CSS 控制 embed 高度比 HTML 属性更可靠
<embed> 的 HTML width/height 属性和 CSS 样式混用时行为不一致：Chrome 以 CSS 为准，Firefox 可能优先读 HTML 属性，Safari 则干脆忽略 height 百分比。统一用 CSS 才能收敛表现。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
<div class="pdf-embed-wrapper"> <embed src="manual.pdf" type="application/pdf"> </div>
对应 CSS：
.pdf-embed-wrapper {
width: 100%;
min-height: 600px; /* 至少保证可见区域 */
position: relative;
}
.pdf-embed-wrapper embed {
width: 100%;
height: 100%; /* 此时有效，因父容器已有 min-height */
display: block;
}- 必须声明
type="application/pdf"，否则 Firefox 可能 fallback 到下载，Chrome 可能静默失败 -
display: block防止 inline 默认行为导致底部多余空白 - 避免在 flex 容器里直接放
<embed>—— flex 的 align-items 默认 stretch 会干扰 height 计算
想让 PDF 自适应宽高比？别靠 embed 自己缩放
<embed> 不会等比缩放 PDF 页面内容。它只是把 PDF 渲染器“塞进”指定区域，原始 PDF 尺寸（比如 A4）和容器尺寸不匹配时，就会拉伸、裁剪或留白。
真正控制比例，得靠外层容器 + CSS：
- 用
aspect-ratio: 4/3（现代浏览器）或padding-bottom: 75%hack（兼容旧版）锁死容器比例 - 确保
<embed>的width和height都设为100%，且父容器position: relative - PDF 文件本身有固有尺寸，浏览器不会重排版 —— 所以“自适应”本质是容器适配，不是内容重绘
示例（4:3 容器）：
<div style="aspect-ratio: 4/3; max-width: 800px; margin: 0 auto;"> <embed src="report.pdf" type="application/pdf" width="100%" height="100%"> </div>
嵌入 PDF 自适应的真正瓶颈不在 HTML
你调了半天 <embed> 的 height，最后发现还是白屏或 404 —— 大概率卡在底层：路径错、MIME 类型不对、CORS 缺失，或者 PDF 文件压根没被服务器正确托管。
调试顺序必须是：
- 打开 Network 面板，点开 PDF 请求，确认 status 是
200 OK，Content-Type是application/pdf - 检查 Response Headers 是否含
Access-Control-Allow-Origin（跨域必需） - 本地双击 HTML 打开必失败 —— 必须走
http://协议（如python3 -m http.server） - Safari 用户基本无解：
<embed>在 iOS/macOS Safari 上默认禁用，连报错都没有，就是空白
如果目标用户包含大量 iOS 设备，<embed> 方案可以直接放弃，改用 <iframe src="xxx.pdf"> 或 PDF.js。
