如何将同class的DIV高度统一设置为其中最高DIV的高度

嘿，这个需求在页面布局里太常见啦！我给你整理了两种实用的解决方案，分别是纯CSS（优先推荐，不用写JS）和JavaScript方案，你可以根据项目的实际情况来选：

现在现代浏览器对Flexbox和Grid的支持都很完善，用CSS就能轻松实现这个效果，完全不需要JS介入。

用Flexbox实现 #

只需要给这些div的父容器设置display: flex，然后给目标div加上flex: 1，它们就会自动匹配最高元素的高度：

/* 父容器样式 */
.div-container {
  display: flex;
  gap: 1.5rem; /* 可选，给div之间添加间距，提升美观度 */
}

/* 你的目标class */
.same-class-div {
  flex: 1; /* 让每个div平分容器宽度，同时自动对齐最高高度 */
  /* height: auto; 这是默认值，不用额外写 */
}

原理很简单：Flexbox布局下，同一flex容器里的子元素会自动在交叉轴（默认是垂直方向）上对齐，高度会统一为容器内最高元素的高度。

用Grid实现 #

如果你的布局更适合用Grid，也可以这么写：

.div-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3个div各占一列，宽度均分 */
  gap: 1.5rem;
}

.same-class-div {
  /* 这里不需要额外设置，Grid子元素默认就会自动等高 */
}

如果你的项目需要兼容IE10及以下的老浏览器，或者有特殊布局没法用CSS方案，那就用JS来手动计算并设置高度：

// 获取所有目标div元素
const targetDivs = document.querySelectorAll('.same-class-div');
let maxHeight = 0;

// 第一步：遍历所有div，找出最大高度值
targetDivs.forEach(div => {
  const currentHeight = div.offsetHeight;
  if (currentHeight > maxHeight) {
    maxHeight = currentHeight;
  }
});

// 第二步：把所有div的高度设置为最大高度
targetDivs.forEach(div => {
  div.style.height = `${maxHeight}px`;
});

⚠️ 注意：如果你的div内容是动态加载的（比如异步请求数据后渲染），一定要在内容完全加载完成后再执行这段代码，否则计算出来的高度会不准确。

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