如何使embed内容自适应父容器高度，实现父容器滚动而非嵌入内容滚动？

核心思路 #

通过JavaScript动态获取嵌入HTML的实际高度，同步设置给<embed>元素；同时给父容器content-wrapper设置最大高度限制和滚动属性，既保证容器自适应内容高度，又在内容超过视口时让父容器滚动而非嵌入内容自身滚动。

修改后的代码 #

HTML 代码

<body onload="initPage()">
  <div class="nav">
      
  </div>
    
  <div class="content-wrapper">
      <embed id="embedded-content" type="text/html" src="content.html">
  </div>
</body>

CSS 代码

.content-wrapper{
    width: 80vw;
    height: auto; /* 取消固定高度，改为自适应 */
    max-height: 90vh; /* 限制最大高度为视口的90% */
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto; /* 内容超过最大高度时，父容器垂直滚动 */
}

#embedded-content{
    width: 100%;
    height: auto; /* 先设为自适应，后续JS动态调整 */
    display: block; /* 消除默认inline元素的间距问题 */
}

JavaScript 代码

function mathSubject() {
    // 保留原有的mathSubject逻辑
}

function adjustEmbedHeight() {
    const embed = document.getElementById('embedded-content');
    
    // 监听嵌入内容加载完成事件
    embed.onload = function() {
        try {
            // 获取嵌入文档的实际高度
            const contentHeight = embed.contentDocument.body.scrollHeight;
            // 同步设置embed的高度为内容实际高度
            embed.style.height = `${contentHeight}px`;
        } catch (error) {
            console.error('无法获取嵌入内容高度：', error.message);
            // 跨域场景下会触发此错误，可按需添加提示逻辑
        }
    };
}

// 页面初始化时执行
function initPage() {
    mathSubject();
    adjustEmbedHeight();
}

关键说明 #

1. 为什么之前的100%/auto无效？
   <embed>是替换元素，默认不会根据内部内容自动拉伸高度。设置height:100%时，它会继承父容器的高度，但父容器height:auto又依赖子元素高度，形成循环依赖，导致高度计算失效。

2. 跨域场景处理
   如果嵌入的HTML来自不同域名，浏览器同源策略会阻止访问contentDocument，此时需要通过跨域通信传递高度：

   • 嵌入页面（content.html）的JS：

     window.onload = function() {
         const height = document.body.scrollHeight;
         window.parent.postMessage({ type: 'embedHeight', height }, '*');
     };
     

   • 主页面的JS调整：

     window.addEventListener('message', function(e) {
         if (e.data.type === 'embedHeight') {
             const embed = document.getElementById('embedded-content');
             embed.style.height = `${e.data.height}px`;
         }
     });
     

内容的提问来源于stack exchange，提问作者Caption