iframe自适应布局问题求助：无法复刻section.defaultthread自适应效果

我想要实现一个自适应内容尺寸的iframe元素，让它的表现和section.defaultthread完全一致——尺寸完全由内容决定，不需要硬编码参数。但目前iframe会破坏页脚布局、占用多余空间并产生不必要的空白。我试过清除边距、设置宽高比、指定高度等方法，都没能解决问题。

补充说明：麻烦在谷歌开发者控制台里禁用iframe的固定高度设置，不知道为什么Git没法移除这个设置。

CSS 代码 #

section.defaultthread{
    white-space: pre-line;
    font-family: 'Chivo Mono';
    font-size: 1.5vw;
    background: white;
    border-bottom: 1px gray dashed;
    padding-top: 4%;
    padding-bottom: 4%;
    position: relative;
}

iframe.defaultthread{
    white-space: pre-line;
    font-family: 'Chivo Mono';
    font-size: 1.5vw;
    background: white;
    border-bottom: 1px gray dashed;
    width: 100%;
    position: relative;
    border: none;
}

HTML 代码 #

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../../CSS/cssdata-alergie.css" type="text/css">
        <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@100&display=swap" rel="stylesheet">
        <link rel="icon" href="../RESOURCES/promise.png">
        <meta name="subject" content="Allergy student project">
        <meta name="author" content="">
        <meta name="language" content="pl">
        <meta name="owner" content="">
        <meta name="url" content="https://shatterwares.com">
        <meta name="coverage" content="Worldwide">
        <meta name="rating" content="General">
        <meta name='HandheldFriendly' content='True'>
        <title>Alergie: projekt</title>
    </head>
    <body style="width: 100%; margin: 0; overflow: hidden;"> 
    <section class="defaultthread">
        <h1 class="lefth1">Reakcja alergiczna</h1>
        <p class="paragraphleft">Reakcja alergiczna - złożona odpowiedź układu immunologicznego na kontakt z alergenem. Polega na wytwarzaniu specyficznych substancji białkowych (głównie immunoglobulin klasy IgE) oraz pobudzaniu limfocytów T, co podczas kolejnego po pierwszym kontakcie z alergenem prowadzi do rozwoju stanu zapalnego. Jest on efektem uwolnienia w trakcie przebiegu reakcji alergicznej substancji chemicznych (histamina, leukotrieny, cytokiny i inne) odpowiedzialnych za wystąpienie objawów alergii.</p>
        <div class="center">
            <img class="responsiveimage" src="../RESOURCES/leki2.png" alt="macrophage">
        </div>
    </section>
    </body>
</html>

1. 修正iframe基础样式 #

先给iframe添加display: block消除行内块默认的底部间距，同时调整内部页面的body样式，避免限制内容高度：

iframe.defaultthread{
    white-space: pre-line;
    font-family: 'Chivo Mono';
    font-size: 1.5vw;
    background: white;
    border-bottom: 1px gray dashed;
    width: 100%;
    position: relative;
    border: none;
    display: block; /* 新增：消除行内块默认间距 */
    margin: 0;
    padding: 0;
}

修改iframe内部页面的body样式，移除overflow: hidden：

<body style="width: 100%; margin: 0;">

2. 用JavaScript动态适配高度 #

同源页面场景（iframe与父页面域名一致）

在父页面中添加脚本，获取内部内容高度并同步给iframe：

const iframe = document.querySelector('iframe.defaultthread');
iframe.onload = function() {
    const contentHeight = iframe.contentDocument.body.scrollHeight;
    iframe.style.height = contentHeight + 'px';
};

跨域页面场景

需要通过postMessage传递高度信息：

• 内部页面添加脚本：

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

• 父页面添加脚本：

window.addEventListener('message', function(e) {
    if (e.data.type === 'iframeHeight') {
        const iframe = document.querySelector('iframe.defaultthread');
        iframe.style.height = e.data.height + 'px';
    }
});

3. 响应式适配补充 #

由于字体使用1.5vw，窗口尺寸变化会影响内容高度，添加resize监听同步更新：

// 同源场景下的resize监听
window.addEventListener('resize', function() {
    const iframe = document.querySelector('iframe.defaultthread');
    if (iframe.contentDocument) {
        const contentHeight = iframe.contentDocument.body.scrollHeight;
        iframe.style.height = contentHeight + 'px';
    }
});

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