等宽等高响应式Div带悬停覆盖层：高度匹配问题求助

我完全懂你的痛点——既要让所有Div自动跟内容最多的那个保持等高，又要处理悬停时弹出的额外文本层，还要兼顾不同断点下的布局形态（md下接近正方形、sm和xs下狭长），确实比普通的等高布局麻烦不少。下面给你几个实用的落地方案，都是纯CSS或轻量JS的，适配你的场景：

方案一：Flexbox 基础布局（首推，纯CSS） #

Flexbox天生自带等高子元素的特性，是最省心的基础解法。针对悬停覆盖层，我们用绝对定位来处理，完全不影响父元素的高度计算：

1. 基础等高布局设置
   先把列的父容器设为flex容器，确保换行适配响应式：

   .row.equal-height {
     display: flex;
     flex-wrap: wrap;
   }
   

   给每个响应式列（col-md-2/col-sm-6/col-xs-12）设置垂直flex布局，再让内部的内容Div自动填充高度：

   .equal-height .col-md-2,
   .equal-height .col-sm-6,
   .equal-height .col-xs-12 {
     display: flex;
     flex-direction: column;
   }
   .equal-height .card { /* 假设你的内容Div类名为card */
     flex: 1; /* 自动拉伸至同列最高元素的高度 */
     position: relative; /* 为悬停层做定位基准 */
     overflow: hidden; /* 防止覆盖层内容溢出 */
   }
   

2. 悬停覆盖层实现
   覆盖层用绝对定位占满整个card，默认隐藏，hover时显示：

   .card .hover-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255,255,255,0.95);
     padding: 1rem;
     opacity: 0;
     transition: opacity 0.3s ease;
     overflow-y: auto; /* 覆盖层内容过多时允许滚动 */
   }
   .card:hover .hover-overlay {
     opacity: 1;
   }
   

   这种方式下，覆盖层的高度完全继承父元素，不会打乱整个布局的等高逻辑，完美适配响应式断点。

方案二：Grid 布局（更简洁，现代浏览器友好） #

如果你的目标浏览器支持Grid（现在主流浏览器都支持），用Grid实现会更简洁，代码量更少：

.row.equal-height {
  display: grid;
  gap: 1rem; /* 列之间的间距 */
}
/* 结合媒体查询适配不同断点 */
@media (min-width: 992px) {
  .row.equal-height {
    grid-template-columns: repeat(6, 1fr); /* md下6列，对应col-md-2 */
  }
}
@media (max-width: 991px) and (min-width: 576px) {
  .row.equal-height {
    grid-template-columns: repeat(2, 1fr); /* sm下2列，对应col-sm-6 */
  }
}
@media (max-width: 575px) {
  .row.equal-height {
    grid-template-columns: 1fr; /* xs下1列，对应col-xs-12 */
  }
}
/* 卡片和悬停层样式同方案一 */
.card {
  position: relative;
  overflow: hidden;
}

Grid会自动让所有网格项保持等高，不需要额外设置，非常省心。

方案三：JS 兜底（兼容旧浏览器） #

如果需要兼容IE10及以下这类老浏览器，可以用JS动态计算最高高度，再统一设置给所有Div：

function setEqualHeights() {
  const cards = document.querySelectorAll('.card');
  let maxHeight = 0;
  
  // 先重置所有高度为auto，避免之前的计算干扰
  cards.forEach(card => {
    card.style.height = 'auto';
    const currentHeight = card.offsetHeight;
    if (currentHeight > maxHeight) {
      maxHeight = currentHeight;
    }
  });
  
  // 给所有卡片设置最高高度
  cards.forEach(card => {
    card.style.height = maxHeight + 'px';
  });
}

// 页面加载和窗口 resize 时重新计算
window.addEventListener('load', setEqualHeights);
window.addEventListener('resize', setEqualHeights);

注意这种方案下，悬停覆盖层如果内容超过卡片高度，要设置overflow-y:auto避免溢出；另外resize时重新计算可能有轻微性能损耗，但胜在兼容性拉满。

额外提示：md下实现接近正方形布局 #

要让col-md-2的Div接近正方形，可以用padding-bottom比例法——因为col-md-2的宽度是父容器的1/6，设置padding-bottom为接近100%的数值，再把内部内容绝对定位：

@media (min-width: 992px) {
  .card {
    position: relative;
    padding-bottom: 90%; /* 调整这个值可以微调正方形比例 */
  }
  .card .content, .card .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

这样md下的Div就能保持接近正方形的形态，同时内容和覆盖层都能填满整个空间。

这些方案我都在实际项目中用过，你可以根据自己的浏览器兼容需求选最合适的~

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