iframe占满剩余高度需动态计算可用空间：先用offsetheight获取固定头部高度，再结合window.innerheight与resize/scroll事件实时更新；同域时onload后校准子页scrollheight，跨域则依赖postmessage双向通信传递availableheight与iframeheight。
iframe要占满剩余高度，必须显式计算父容器可用空间
直接写 height: 100% 或 height: 100vh 都不能让 iframe “自适应剩余高度”——它只会占满整个视口或父容器的全部高度，而不是“减去导航栏、标题等之后剩下的部分”。真实场景中，你总得先算出顶部固定区域（比如 header、.navbar）占了多少像素，再用 window.innerHeight 减掉它，最后赋给 iframe。
- 必须监听
window.resize，因为用户缩放、横竖屏切换、iOS Safari 地址栏收放都会改变可用高度 - 别依赖
getBoundingClientRect()算顶部元素高度——如果该元素用了position: sticky或动画，它的 layout 可能延迟，导致计算偏小 - 推荐用
offsetHeight读固定头部（如document.querySelector('header').offsetHeight），它返回渲染后的实际像素值，稳定 - 计算完记得设
iframe.style.height = height + 'px'，不要动iframe.height属性，后者会被 CSS 覆盖
同域 iframe 加载后还要再校准一次高度
就算你算出了初始剩余高度，子页面加载后内容可能比预估的高（比如图片懒加载完成、字体回流、JS 插入 DOM），导致底部被截断。这时不能只靠 resize 监听，得在 iframe.onload 后再触发一次重算。
- 子页面必须清空
body { margin: 0; padding: 0; }，否则多出的 8px 会撑破计算好的高度 - 读子页高度时优先用
contentDocument.documentElement.scrollHeight，fallback 到body.scrollHeight，避免 IE 或怪异模式下取值为 0 - 加
setTimeout(() => { /* 读高 */ }, 0)，确保浏览器已完成 layout，尤其当子页用了font-display: swap或 Web Font 时 - 最终高度取
Math.max(计算出的剩余高度, 子页真实 scrollHeight)，防止内容短于剩余空间时 iframe 塌缩
跨域 iframe 只能靠子页主动上报“内容高度”，父页无法反向测量
父页面永远拿不到跨域 iframe 的 contentDocument，SecurityError 不是 bug 是规范。所谓“自适应剩余高度”，其实是两步：父页把可用空间告诉子页 → 子页按需渲染并上报自己真正需要的高度。
- 子页发消息前必须确认
window.parent !== window，否则独立打开时window.parent.postMessage会报错 - 消息体建议带两个字段：
{ type: 'iframeHeight', height: N }和{ type: 'availableHeight', height: M }，方便子页做响应式布局（比如内容超限时启用内部滚动） - 父页接收时必须校验
event.source === iframe.contentWindow和event.origin，不能只靠type字段过滤，否则其他 iframe 可能干扰 - 子页若用 React/Vue，
postMessage必须放在useEffect(() => {}, [])或mounted钩子内，避开 SSR 渲染阶段
移动端 Safari 的 viewport 高度会动态变，别信 onload 时的一次性计算
iOS Safari 在地址栏收起/展开时会重排整个 viewport，window.innerHeight 可能突变 60–100px，但不会触发 resize 事件。只监听 resize 会漏掉这个变化，导致 iframe 高度错位、底部留白或遮挡。
- 必须同时监听
scroll事件（节流后），并在回调里检查window.innerHeight是否变化；Safari 下滚动常伴随地址栏状态切换 - 子页若设置了
viewportmeta（如height=device-height），反而会让问题更隐蔽——它强制锁定高度，掩盖了真实可用空间波动 - 上线前务必在真机上测试横竖屏切换+滚动组合操作，模拟器无法复现 Safari 的 viewport 动态行为
实际最易被忽略的是：“剩余高度”不是静态值，而是一个随布局、设备、甚至用户交互持续变化的量；iframe 自适应的本质，是父页和子页之间对“谁控制高度”的责任划分——同域时父页可强控，跨域时必须交还控制权给子页，并建立双向通信契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
