窗口Resize时JS实时更新面板高度及批量计算面板高度方案咨询

一、实现窗口尺寸变化时实时更新高度 #

把高度计算逻辑封装成独立函数，在页面加载和窗口 resize 时调用，同时添加防抖处理避免频繁触发：

// 封装高度计算逻辑
function updatePanelHeights() {
  const root = document.querySelector(':root');
  // 选择所有面板（建议给所有面板统一添加.panel类）
  const panels = document.querySelectorAll('.panel');

  panels.forEach((panel, index) => {
    // 动态生成CSS变量名，比如--height-1、--height-2...
    const heightVar = `--height-${index + 1}`;
    root.style.setProperty(heightVar, `${panel.clientHeight}px`);
  });
}

// 页面加载完成后执行一次
window.addEventListener('DOMContentLoaded', updatePanelHeights);

// 监听窗口resize事件，添加防抖减少性能消耗
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updatePanelHeights, 100);
});

二、自动计算所有面板高度（无需手动新增代码） #

1. 给所有面板元素添加统一的.panel类（比如原来的.panel-01保留，同时加上.panel），这样可以一次性选中所有面板。
2. 遍历面板时动态生成对应的CSS变量，新增面板时只需添加.panel和对应的序号类（如.panel-04），无需修改JS代码。

对应的CSS修正（注意你原来的.pangel-03是拼写错误，改成.panel-03）：

.panel-01 {
    top: calc(100vh - var(--height-1));
}

.panel-02 {
    top: calc(100vh - var(--height-2));
}

.panel-03 {
    top: calc(100vh - var(--height-3));
}

/* 如果后续新增面板，只需按此格式添加 */
.panel-04 {
    top: calc(100vh - var(--height-4));
}

更简洁的替代方案（无需全局CSS变量） #

如果不想维护多个CSS变量和面板样式，可以直接在JS中设置每个面板的top值，这样CSS里无需写每个面板的样式：

function updatePanelHeights() {
  const panels = document.querySelectorAll('.panel');
  panels.forEach(panel => {
    panel.style.top = `calc(100vh - ${panel.clientHeight}px)`;
  });
}

// 页面加载和resize时调用逻辑同上
window.addEventListener('DOMContentLoaded', updatePanelHeights);
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updatePanelHeights, 100);
});

此时CSS只需保留面板的基础样式，无需单独设置top：

/* 面板基础样式示例 */
.panel {
    position: absolute;
    /* 其他自定义样式 */
}

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