width="100%"合法但常无效，因iframe默认inline，需display:block消除基线空白；flex容器中需加flex:1或min-width:0防压缩；height缺失会导致视觉“未铺满”，须配合高度策略。
width="100%" 是合法写法，但单独设它往往没效果——因为 iframe 默认是 inline 元素，父容器若没清除行内布局干扰，或没设 display: block，宽度会被基线对齐、换行空格等意外因素截断。
为什么 width="100%" 看似写了却没占满
常见现象：iframe 只占父容器一半宽，右边留白；或在 flex/grid 容器里被压缩成最小内容宽。根本原因不是属性写错，而是 CSS 层级和显示模型覆盖了 HTML 属性。
-
width="100%"会被转为style="width: 100%;"，但父容器若用了display: flex，子元素默认flex-shrink: 1，会主动缩小 - iframe 是
inline元素，底部默认有几像素空白（基线对齐导致），视觉上像“没铺满” - 父容器本身
width不明确（比如只写了max-width: 800px但没设width），100%就失去参照
真正起效的写法组合
别只依赖 HTML 属性，用 CSS 主导控制，且必须切断 inline 行为链：
- 给
<iframe>加style="width: 100%; display: block;"——display: block是关键，消除底部空白并让百分比宽度可靠生效 - 如果父容器是 flex 布局，额外加
flex: 1或min-width: 0防止收缩 - 避免混用：不要同时写
width="100%"和style="width: 100%"，后者会覆盖前者，但冗余无益 - 移动端需确认
<meta name="viewport" content="width=device-width">已存在，否则 100% 可能按桌面视口算
width 属性单位到底怎么写才对
HTML 的 width 属性不等于 CSS 的 width，规则完全不同：
立即学习“前端免费学习笔记（深入）”；
-
width="640"→ 合法，等价于640px；width="640px"→ 无效，浏览器会忽略单位 -
width="100%"→ 必须带%，否则当数值处理，变成 100 像素 -
width="50vw"→ 完全无效，width属性不支持任何 CSS 单位（vw/vh/rem） - 想用
vw？只能走 CSS：style="width: 50vw;"
响应式场景下，光设宽度远远不够
设了 width="100%" 后，高度大概率塌缩——这不是宽度的问题，而是高度缺失引发的连锁失效。你看到的“没铺满”，常常是 iframe 高度为 0 导致内容被裁掉上半部分，视觉误判为宽度异常。
- 固定宽高比（如视频）：必须用
padding-bottom+position: absolute容器，或现代aspect-ratio（注意 Safari ≤15.3 不支持） - 同源内容自适应高度：靠
onload读document.body.scrollHeight，不能只信height="100%" - 跨域内容：无法读子页面 DOM，
height="100%"在绝大多数布局中必然失效，得靠 postMessage 协同或预设安全高度
真正难的从来不是写 width="100%" 这一行，而是它背后那一整条渲染链路：父容器是否 block、是否 flex、是否有 margin/padding、是否 viewport 正确、以及——高度有没有被悄悄吃掉。
