通过 javascript 动态获取 iframe 内容的实际高度并设置其样式，可使 iframe 高度精准匹配文档内容，从而避免内部滚动、保留外部容器（如 `.content-wrapper`）的统一滚动体验。
在响应式嵌入多份高度不一的 HTML 内容时，直接使用固定 height 或 100% 会导致留白或截断；而 <embed> 标签本身不支持跨域内容高度读取，且缺乏可靠的 DOM 访问接口。推荐改用 <iframe> 并配合 JavaScript 动态适配高度，这是目前兼容性好、稳定性高的主流方案。
✅ 正确实现步骤
- 替换 <embed> 为 <iframe>（语义更清晰，API 更完善）
- 确保同源：只有同源 iframe 才能安全访问 contentWindow.document.body.scrollHeight；若需跨域，请使用 postMessage 双向通信（本文聚焦同源场景）。
- 监听 load 事件：在 iframe 内容加载完成后再读取高度，避免 DOM 尚未渲染导致数值为 0。
- 动态设置高度：将 scrollHeight 赋值给 iframe 的 style.height，单位为 'px'。
? 示例代码（完整可用）
<!DOCTYPE html>
<html>
<head>
<style>
.content-wrapper {
width: 80vw;
margin: 0 auto;
overflow-y: auto; /* 父容器启用滚动 */
border: 1px solid #eee;
height: 90vh; /* 可设为最大高度，内容超长时自动滚动 */
}
#embedded-content {
width: 100%;
border: none;
display: block;
}
</style>
</head>
<body onload="mathSubject()">
<div class="nav"></div>
<div class="content-wrapper">
<iframe id="embedded-content" src="content.html"></iframe>
</div>
<script>
const iframe = document.getElementById('embedded-content');
iframe.onload = function () {
try {
// 同源前提下，获取内容文档实际高度（含溢出部分）
const doc = iframe.contentDocument || iframe.contentWindow.document;
const height = doc.body.scrollHeight;
iframe.style.height = height + 'px';
} catch (e) {
console.warn('无法读取 iframe 内容高度（可能跨域）:', e);
// 跨域 fallback：可预设最小高度或启用 scrollable iframe
iframe.style.height = '600px';
}
};
</script>
</body>
</html>⚠️ 注意事项
- scrollHeight vs offsetHeight：优先使用 scrollHeight，它包含不可见的溢出内容高度，更能反映真实文档高度；offsetHeight 仅返回渲染后的可视区域高。
- CSS 重置建议：在被嵌入的 content.html 中，移除 <body> 默认 margin 和 padding，或添加 body { margin: 0; padding: 0; }，防止高度计算偏差。
- 响应式增强（可选）：如需窗口缩放后重新适配，可监听 window.resize 并结合防抖再次触发高度更新。
- 无障碍与 SEO：<iframe> 支持 title 属性（如 title="数学专题内容"），提升可访问性，建议补充。
该方案已在 Chrome、Firefox、Edge 等现代浏览器中稳定运行，兼顾开发效率与用户体验——让父容器成为唯一滚动锚点，内容始终“撑满”又不溢出。
