iframe的width属性只支持像素（不加单位默认为px）和百分比（必须带%），不支持vw/vh/rem等CSS单位；width="100"是100像素而非占满，父容器无明确宽度时width="100%"会失效。
width 属性直接写在 <iframe> 标签上最可靠，不加单位就是像素，加 % 才是百分比——别写 width="100" 以为能占满，它只会是 100 像素。
width 属性认什么单位？px 和 % 是唯二合法值
width 是 HTML 原生属性，不是 CSS，所以只接受两种写法：
-
width="800"或width="800px"→ 都是 800 像素，等效，不写单位完全合法 -
width="100%"→ 相对于父容器宽度计算，但必须确保父元素有明确宽度（比如width: 600px或max-width: 100%），否则可能塌成 0 -
width="50vw"、width="16rem"等 CSS 单位 → 全部无效，浏览器直接忽略
想用 vw 或 rem？只能走 style="width: 50vw;"，但这时 width 属性本身就被覆盖，仅作 fallback。
为什么写了 width="100%" 却没撑满？
常见原因是父容器没设宽度，或者用了 display: flex / display: grid 但没处理好 inline 元素行为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父级是
<div>但没设width或max-width，100%就失去参照，结果常为 0 或默认 300px - 父级用了
display: flex，<iframe>默认是inline元素，flex 里会按内容宽度收缩，width="100%"失效 - 解决办法：给
<iframe>加style="display: block;"，再配width: 100%内联样式，或用容器包裹 +position: absolute
固定宽 vs 百分比宽，怎么选？
取决于是否需要响应式：
- 纯展示、尺寸确定（如嵌入 YouTube 视频）→ 直接
width="640" height="360"，稳定不翻车 - 要适配手机/横竖屏 → 别只靠
width="100%"，必须配合 CSS 容器，例如用padding-bottom锁定宽高比，再让<iframe>绝对定位填满 - 同源且需动态调宽（比如根据内容重算）→ 改
iframe.style.width，别碰iframe.width属性，JS 无法修改原生属性值
真正麻烦的是：百分比只在 iframe 初次渲染时计算一次，父容器 resize 后不会自动更新；而 width 属性又不能监听 resize，只能靠 JS 主动重设 style.width。
