iframe 中 html 高度大於 body 導致異常滾動：CSS display:block 重置文檔流解決

問題現象

父頁面嵌入 <iframe>，iframe 內文檔的 <html> 元素高度大於 <body>，導致雙重滾動條或異常留白。

根本原因

• 瀏覽器默認 html, body { height: 100%; } 但內容超出時表現不一
• <html> 是文檔根元素，<body> 是其子元素，邊距合併、內邊距、浮動等導致高度不一致
• iframe 自動調整高度時可能以 html 為準，內容實際在 body 中

解決方案

方案一：重置 html/body 為塊級塊（推薦，最簡單）

<style>
html, body {
    display: block;      /* 重置為標準塊級盒模型 */
    height: 100%;        /* 可選：鎖定高度 */
    margin: 0;           /* 消除默認邊距 */
    padding: 0;          /* 消除默認內邊距 */
    overflow: hidden;    /* 防止雙滾動條，由父頁面控制 */
}
</style>

方案二：iframe 自適應高度（父頁面 JS 控制）

<iframe id="myIframe" src="child.html" frameborder="0" style="width: 100%; border: none;"></iframe>

<script>
const iframe = document.getElementById('myIframe');
iframe.onload = function() {
    try {
        // 獲取子文檔 body 高度
        const doc = iframe.contentDocument || iframe.contentWindow.document;
        const height = doc.body.scrollHeight;
        iframe.style.height = height + 'px';
    } catch (e) {
        console.warn('跨域無法訪問 iframe 內容', e);
    }
};
</script>

方案三：CSS 現代重置（Normalize/Reset CSS）

/* 針對 iframe 內部頁面 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    overflow: hidden; /* 關鍵：禁止內部滾動 */
}
body {
    /* 業務佈局 */
}

跨域限制提醒

若 iframe **跨域**（不同域名/端口/協議），父頁面**無法訪問** iframe.contentDocument。解決方案：

• 同域部署
• 使用 postMessage 通信傳遞高度
• 服務端代理/反向代理統一域名

總結

• ✅ **最快修復**：子頁面加 html, body { display: block; margin: 0; padding: 0; overflow: hidden; }
• ✅ **自適應高度**：父頁面 onload 讀取 body.scrollHeight 設置 iframe 高度
• 💡 **原則**：iframe 內頁面應**無滾動條**，由父頁面統一控制滾動

 display: block; }