EasyUI Tabs iframe 高度自適應：JS 動態設置 tabs 容器尺寸

問題

<iframe> 在 EasyUI Tabs 中高度極低（約 150px），內容被截斷。

原因

Tabs 容器初始化時高度為 auto，但未撐開；iframe height:100% 參考父級高度，父級高度為 0 導致 iframe 高度為 0。

解決方案

$("#tabs").tabs({
    width: $("#tabs").parent().width(),
    height: $("#tabs").parent().height(),
    onAdd: function(title, index) {
        var panel = $(this).tabs('getTab', index);
        panel.css({width: '100%', height: '100%'});
        panel.find('iframe').css({width: '100%', height: '100%'});
    }
});

// 窗口 resize 時同步
$(window).resize(function() {
    $("#tabs").tabs('resize', {
        width: $("#tabs").parent().width(),
        height: $("#tabs").parent().height()
    });
});

關鍵點

• 移除 HTML 標籤上的 class="easyui-tabs"，改用 JS 初始化完全控制尺寸
• 父容器必須有明確高度（如 height: 100vh 或父級 flex/grid 撐開）
• onAdd 回調中強制 panel 與 iframe 撐滿