如何让嵌入的 iframe 自适应内容高度并实现父容器滚动

通过 javascript 动态获取 iframe 内容的实际高度并设置其样式，可使 iframe 高度精准匹配文档内容，从而避免内部滚动、保留外部容器（如 `.content-wrapper`）的统一滚动体验。

在响应式嵌入多份高度不一的 html 内容时，直接使用固定 height 或 100% 会导致留白或截断；而 标签本身不支持跨域内容高度读取，且缺乏可靠的 dom 访问接口。推荐改用 ，这是目前兼容性好、稳定性高的主流方案。

✅ 正确实现步骤

1. 替换 为 （语义更清晰，API 更完善）
2. 确保同源：只有同源 iframe 才能安全访问 contentwindow.document.body.scrollHeight；若需跨域，请使用 postMessage 双向通信（本文聚焦同源场景）。
3. 监听 load 事件：在 iframe 内容加载完成后再读取高度，避免 DOM 尚未渲染导致数值为 0。
4. 动态设置高度：将 scrollHeight 赋值给 iframe 的 style.height，单位为 ‘px’。

? 示例代码（完整可用）

⚠️ 注意事项

• scrollHeight vs offsetHeight：优先使用 scrollHeight，它包含不可见的溢出内容高度，更能反映真实文档高度；offsetHeight 仅返回渲染后的可视区域高。
• css 重置建议：在被嵌入的 content.html 中，移除 默认 margin 和 padding，或添加 body { margin: 0; padding: 0; }，防止高度计算偏差。
• 响应式增强（可选）：如需窗口缩放后重新适配，可监听 window.resize 并结合防抖再次触发高度更新。
• 无障碍与 seo：

该方案已在 chrome、firefox、edge 等现代浏览器中稳定运行，兼顾开发效率与用户体验——让父容器成为唯一滚动锚点，内容始终“撑满”又不溢出。