如何让vis.js时间线中所有分组的高度保持一致？

这个问题是vis.js Timeline组件底层渲染逻辑导致的：非堆叠模式下，组件默认会给最后一个分组预留5px的底部缓冲区，不属于条目样式范畴，因此修改条目样式无法生效。可通过以下三种方案解决：

• 方案1：CSS强制覆盖样式
  直接统一所有分组的高度规则，优先级高于组件默认样式即可：

.vis-timeline .vis-group {
  height: 40px !important; /* 替换为你需要的统一高度值 */
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* 隐藏组件默认生成的底部占位元素 */
.vis-timeline .vis-bottom {
  display: none !important;
}

• 方案2：初始化时添加固定高度配置
  在Timeline的初始化参数中开启分组固定高度模式，从配置层面避免动态计算高度的偏差：

const timelineOptions = {
  stack: false, // 保留你原有非堆叠模式配置
  groupHeightMode: 'fixed', // 强制所有分组使用固定高度
  groupHeight: 40, // 和上面CSS设置的高度保持一致
  margin: {
    group: 0, // 分组间距统一在此配置，避免组件内部额外追加边距
    item: {
      vertical: 0
    }
  }
}

• 方案3：渲染完成后手动校准高度
  如果以上方案都不生效，可以监听组件渲染完成事件，强制把最后一个分组的高度和其他分组对齐：

// timeline为你初始化得到的Timeline实例
timeline.on('changed', function() {
  const groupList = document.querySelectorAll('.vis-timeline .vis-group');
  if (groupList.length < 2) return;
  // 取第一个分组的高度作为统一标准
  const standardHeight = groupList[0].offsetHeight;
  // 给最后一个分组设置相同高度
  groupList[groupList.length - 1].style.height = `${standardHeight}px`;
});

操作前可以先通过浏览器开发者工具检查最后一个.vis-group元素的盒模型，确认额外5px的所属位置，再针对性调整即可。

内容的提问来源于stack exchange，提问作者Théophile