如何通过CSS使同类元素高度与屏幕内最高元素保持一致？

这个需求其实很常见——要让同分类的产品卡片保持统一高度，既不会因为内容短留大片空白，也不会因为内容长破坏布局。下面给你几个实用的方案，从现代纯CSS到兼容旧浏览器的JS方案都有：

方案一：CSS Flexbox（推荐，现代浏览器首选） #

Flexbox天生就适合处理这种等高布局，只需要给产品组套一个容器，再调整一下内部元素的布局规则就行：

修改后的CSS： #

/* 产品组容器，负责排列所有产品 */
.product-group {
  display: flex;
  flex-wrap: wrap; /* 让产品自动换行，适配不同屏幕宽度 */
  gap: 12px; /* 可选，给产品之间加些间距，更美观 */
}

/* 每个产品卡片 */
.product-group span {
  border: 1px solid black;
  width: 110px;
  text-align: center;
  display: flex; /* 把卡片本身也改成flex容器，方便内部元素布局 */
  flex-direction: column; /* 让图片和描述垂直排列 */
}

/* 产品描述段落 */
.product-group p {
  width: 90%;
  margin: 0 auto;
  flex-grow: 1; /* 关键！让描述自动填充卡片内的剩余空间，确保所有卡片高度一致 */
}

对应的HTML结构： #

<!-- 每个分类的产品单独套一个product-group容器 -->
<div class="product-group">
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
</div>

为什么这个方案好用？

• 纯CSS实现，不需要JS，性能更好
• 自动适配屏幕大小，窗口缩放时会自动重新调整每行的等高
• 每个分类单独用product-group容器，不同分类之间不会互相影响

方案二：CSS Grid（布局更灵活） #

如果你需要更复杂的产品排列规则，Grid布局也是个不错的选择，同样能轻松实现等高：

CSS代码： #

.product-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, 110px); /* 自动适配屏幕，每列固定宽度110px */
  gap: 12px;
}

.product-group span {
  border: 1px solid black;
  text-align: center;
  display: grid;
  grid-template-rows: auto 1fr; /* 图片高度自适应，描述部分占满剩余空间 */
}

.product-group p {
  width: 90%;
  margin: 0 auto;
}

这个方案和Flex的效果几乎一样，但Grid更适合处理二维布局，如果后续你需要调整产品的行数、列数或者跨行列的布局，Grid会更灵活。

方案三：JavaScript动态计算（兼容旧浏览器） #

如果你的网站需要兼容IE10及以下这类旧浏览器，可以用JS动态计算每组内最高元素的高度，然后统一设置给所有元素：

JS代码： #

// 定义函数，传入产品组的选择器，处理该组内的所有产品
function setEqualHeights(groupSelector) {
  const productGroups = document.querySelectorAll(groupSelector);
  
  productGroups.forEach(group => {
    const products = group.querySelectorAll('span');
    let maxHeight = 0;
    
    // 先重置所有产品的高度，避免之前的计算结果影响
    products.forEach(product => {
      product.style.height = 'auto';
      // 获取当前产品的实际高度
      const currentHeight = product.offsetHeight;
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    
    // 把最高高度设置给所有产品
    products.forEach(product => {
      product.style.height = `${maxHeight}px`;
    });
  });
}

// 页面加载完成后执行
window.addEventListener('load', () => {
  setEqualHeights('.product-group');
});

// 窗口大小改变时重新计算，适配屏幕变化
window.addEventListener('resize', () => {
  setEqualHeights('.product-group');
});

注意：如果你的产品是通过AJAX动态加载的，要记得在内容加载完成后再调用这个函数，否则会找不到元素。

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