HTML iframe 高度自適應與 display:none 空白問題修正

問題一：iframe 底部留白

iframe 預設 vertical-align: baseline，行內元素基線對齊留下約 3-5px 空白。

iframe { display: block; }  /* 或 vertical-align: top/bottom/middle */

問題二：display:none 後佔位空白

原程式碼切換 display 在 block/none，但父容器高度未重算，或 iframe 本身高度固定導致內容收合時留白。

問題三：iframe 高度自適應

原 setHeight() 讀取 body.scrollHeight 但 iframe 本身有固定高度，導致遞迴計算錯誤。

修正版 setHeight

function setHeight() {
    var iframe = document.getElementById('iframe-bottom');
    var body = iframe.contentWindow.document.body;
    // 先重置高度，讓 scrollHeight 反映真實內容高度
    iframe.style.height = '50px';  // 或 0
    // 非同步等待重排完成
    setTimeout(function() {
        iframe.style.height = body.scrollHeight + 'px';
    }, 0);  // 0 即下一個事件循環
}

完整觸發點

• 頁面載入：window.onload = setHeight;
• 內容變動：展開/收合按鈕 onclick="toggleDesc(); setHeight();"
• 跨域限制：同源策略下才能存取 contentWindow.document，跨域需 postMessage 通訊。

原答案核心

「setHeight 改這樣... 還原成 iframe 裡面 center 的高度，然後延時設置 iframe 高度為所加載頁面的實際滾動高度」