不同CSS类的HTML div统一自适应高度的jQuery解决方案

要让同一CSS类的所有div保持相同高度，且高度随内容自动适配，用jQuery可以这样实现：

核心思路 #

针对每个目标类，先计算该类下所有div的最大高度，再将这个高度统一赋值给该类的所有div；同时监听窗口 resize 事件，在窗口尺寸变化时重新计算，保证响应式效果。

方案一：手动指定目标类（适合类名固定的场景） #

先引入jQuery，然后添加以下JS代码：

// 定义设置等高的函数
function setEqualHeights(className) {
  let maxHeight = 0;
  // 先重置高度为auto，避免之前的计算结果干扰
  $(className).height('auto');
  // 遍历该类所有div，找出最大高度
  $(className).each(function() {
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  // 给该类所有div设置最大高度
  $(className).height(maxHeight);
}

// 页面加载完成后执行
$(document).ready(function() {
  setEqualHeights('.green');
  setEqualHeights('.blue');
  setEqualHeights('.orange');
  
  // 窗口大小改变时重新计算高度
  $(window).resize(function() {
    setEqualHeights('.green');
    setEqualHeights('.blue');
    setEqualHeights('.orange');
  });
});

方案二：自动识别目标类（适合类名不固定的场景） #

如果不想手动写每个类名，可以自动获取页面中所有div的类，批量处理：

function setAllEqualHeights() {
  // 收集所有唯一的div类名
  const uniqueClasses = new Set();
  $('div[class]').each(function() {
    $(this).attr('class').split(' ').forEach(cls => uniqueClasses.add(cls));
  });
  
  // 遍历每个类，设置等高
  uniqueClasses.forEach(cls => {
    let maxHeight = 0;
    $(`.${cls}`).height('auto');
    $(`.${cls}`).each(function() {
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
      }
    });
    $(`.${cls}`).height(maxHeight);
  });
}

// 页面加载和窗口resize时执行
$(document).ready(function() {
  setAllEqualHeights();
  $(window).resize(setAllEqualHeights);
});

你的原始代码 #

CSS代码

div {
  width: 25%;
  height:auto;
  display: inline-block;
  padding: 14px;
  margin: 5px;
  border: 3px solid #000;
  box-sizing: border-box;
}

.green {
  background: green
}

.blue {
  background: blue;
}

.orange {
  background: orange;
}

HTML代码

<div class="green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>
<div class="green">Lorem ipsum dolor sit amet, consectetur</div>
<div class="green">Lorem ipsum dolor sit</div>
<br><br><br>
<div class="blue">Lorem ipsum dolor sit amet, consectetur</div>
<div class="blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>
<div class="blue">Lorem ipsum dolor sit</div>
<br><br><br>
<div class="orange">Lorem ipsum dolor sit</div>
<div class="orange">Lorem ipsum dolor sit amet, consectetur</div>
<div class="orange">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>

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