百分比宽高不生效是因为absolute元素的百分比依赖最近定位祖先，而iframe内页html/body默认高度为auto，需显式设置html、body及中间容器height: 100%并确保定位上下文连贯。
iframe内容里用position: absolute时，百分比宽高为什么不生效？
因为absolute元素的百分比尺寸，是相对于它的**最近定位祖先（position为relative、absolute或fixed）**计算的，不是相对于iframe视口。如果父容器没设定位上下文，又没设height，那top: 50%或width: 80%就完全没参照——浏览器按规范会当成auto处理。
必须给html和body显式设高，否则100%无效
iframe加载的页面默认html和body高度是auto，即使iframe本身有固定高度，子页面内部仍不知道“100%”该算多少。常见现象：写div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }，结果只占一行高。
- 在iframe内页的CSS中加：
html, body { margin: 0; padding: 0; height: 100%; } - 确保
body是absolute元素的直接或间接祖先，且没有其他定位祖先截断参照链 - 如果
body里还套了一层div，记得也给它position: relative或至少height: 100%
iframe自身尺寸必须是确定值，不能依赖100%未定义父容器
如果外层页面里iframe写成width: 100%; height: 100%，但它的父元素没设高（比如div没设height），那iframe实际渲染高度为150px（浏览器默认），子页面里的100%就只能按这150px算——不是你预期的视口高度。
- 检查外层HTML：
iframe的父容器是否设置了明确height（如height: 600px或height: calc(100vh - 80px)） - 避免用
height: 100%向上追到html却忘了给html设height: 100% - 调试技巧：在iframe内页打开开发者工具，选中
html元素，看Computed面板里height是不是你想要的数值
绝对定位元素想撑满iframe视口，推荐用inset: 0代替top/left/right/bottom
inset: 0是更简洁可靠的写法，语义明确表示“贴四边”，且对百分比计算更友好（尤其配合height: 100%时不易漏掉某一边）。
立即学习“前端免费学习笔记（深入）”；
- 替代写法：
.full-cover { position: absolute; inset: 0; }（等价于top: 0; right: 0; bottom: 0; left: 0） - 注意兼容性：
inset在Chrome 89+/Firefox 63+/Safari 14.1+支持，老版本需回退到四属性写法 - 如果元素需要居中而非铺满，优先用
transform: translate(-50%, -50%)配合top: 50%; left: 50%，比单纯百分比更稳定
真正卡住的往往不是iframe本身，而是子页面的根元素高度链断裂，或者外层容器尺寸不可见。先确认html → body → 定位父容器这条链上每层都有明确高度和定位上下文，再调绝对定位——否则所有百分比都是空中楼阁。
