Tab页签中iframe高度撑满剩余窗口需JS动态计算父容器可用高度并设置style.height，因CSS的height:100%在无显式高度父容器中无效；须使.layui-tab-content通过flex:1占满剩余空间，并监听tabChange、resize、fullscreenchange事件实时调整，跨域时需try/catch降级。
Tab选项卡中 iframe 高度撑满剩余窗口的核心逻辑
Tab 页签里嵌入的 iframe 默认不会自动占满可用高度，因为父容器（如 .layui-tab-content）没有显式高度，且 iframe 的 height: 100% 在无参照高度的上下文中无效。必须通过 JS 主动计算并设置 iframe.style.height，而不是仅靠 CSS。
确保父容器具备可计算高度
Tab 内容区需有明确高度基准，否则无法“撑满剩余”。常见做法是让 .layui-tab-content 占满 Tab 区域剩余空间：
- 给外层容器（如 body 或主内容区）设 display: flex; flex-direction: column，并约束高度（如 height: 100vh）
- .layui-tab-content 设置 flex: 1; overflow: hidden，使其自动填充剩余空间
- 避免给 .layui-tab-content 设固定 height 或 max-height，否则会截断 iframe
动态设置 iframe 高度（关键步骤）
在 Tab 切换完成或 iframe 加载完成后，读取父容器可用高度，再赋值给 iframe：
- 监听 tabChange 事件，在回调中获取当前 tab-pane 的高度：$(‘.layui-tab-content .layui-show’).outerHeight()
- 找到该 pane 下的 iframe：$(‘.layui-show iframe’)
- 设置其 style.height = 计算出的高度 + ‘px’；注意减去 tab 标题栏、按钮等固定占用（如 45px）
- 若内容含异步渲染（如 ECharts、表格），需在子页面加载完后再次调用 resize 逻辑
处理全屏/窗口缩放场景
用户拖拽浏览器边框或切换全屏时，iframe 高度不会自动更新，必须手动响应：
- 绑定 window.resize 事件，延迟 16ms 后重新计算并重设 iframe 高度（防抖）
- 监听 fullscreenchange 事件，全屏进入/退出后立即执行一次高度重算
- 对跨域 iframe 做 try/catch 包裹，失败时降级为预设高度（如 ['100%', '80vh']）
