jquery - 如何管理多个盒子的盒子覆盖高度相同

Question

如果文本行不相同，我如何管理覆盖框高度相同，下面是我的伪代码，如果你可以用 jQuery 或 JS 管理它，请给我一个解决方案来解决它，谢谢你宝贵的时间尝试给出解决方案。

.box {
display:table;
width:100%;

}
.box-col {
display:table-cell;
margin:0 2px;
height:300px;
border:1px solid gray;
position:relative;
width:33%;
}
.box-overlay {
position:absolute;
text-align:center;
padding:5px;
left:0;
bottom:0;
width:100%;
background:rgba(0,0,0,0.7);
}
.box-overlay h2,.box-overlay p {
color:#fff;
}

<div class="box">
 <div class="box-col">
<img src="">
 <div class="box-overlay">
 <h2>Title</h2>
 <p>Lorem Ipsum is simply dummy text of s</p>
 </div>
 </div>

 <div class="box-col">
<img src="">
 <div class="box-overlay">
 <h2>Title</h2>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </div>
 </div>
 
  <div class="box-col">
<img src="">
 <div class="box-overlay">
 <h2>Title</h2>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
 </div>
 </div>
</div>

Answer 1

您可以遍历叠加层，找到最高的一个，然后将该高度应用于所有叠加层。这是一个使用 jQuery 的解决方案。

var tallest = 0,
    $overlays = $('.box-overlay');
$('.box-overlay').each(function() {
  var thisHeight = $(this).outerHeight();
  if (thisHeight > tallest) {
    tallest = thisHeight;
  }
});
$overlays.height(tallest);

.box {
  display: table;
  width: 100%;
}

.box-col {
  display: table-cell;
  margin: 0 2px;
  height: 300px;
  border: 1px solid gray;
  position: relative;
  width: 33%;
}

.box-overlay {
  position: absolute;
  text-align: center;
  padding: 5px;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.box-overlay h2,
.box-overlay p {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="box-col">
    <img src="">
    <div class="box-overlay">
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of s</p>
    </div>
  </div>

  <div class="box-col">
    <img src="">
    <div class="box-overlay">
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>

  <div class="box-col">
    <img src="">
    <div class="box-overlay">
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
    </div>
  </div>
</div>