Jquery Solution for Same auto height for different HTML div Classes-CodePudding

I need same auto height in different CSS classes. Height is not fixed. Height is automatically increasing as per it's content. But all div need same height. Have any solution in Jquery ? Please check this Codepen link: https://codepen.io/coderco/pen/PoROVrp . I am looking for result as like this : https://prnt.sc/xJ31LH64Na17 Here is my codes. Please help me..

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;
}

<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>
<div >Lorem ipsum dolor sit amet, consectetur</div>
<div >Lorem ipsum dolor sit</div>
<br><br><br>
<div >Lorem ipsum dolor sit amet, consectetur</div>
<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>
<div >Lorem ipsum dolor sit</div>
<br><br><br>
<div >Lorem ipsum dolor sit</div>
<div >Lorem ipsum dolor sit amet, consectetur</div>
<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>

CodePudding user response：

First, I set the div to float:left. Then I initialize my maxHeight variable to 0. Then I loop through the divs to determine the tallest height. Then I have a second loop that goes through the same divs and sets them to all having the same height.

I also created a reusable function so you only need to pass the class selector.

$.fn.setMaxHeight = function(){
  let maxHeight = 0;
  $(this).each(function(){if($(this).height() > maxHeight){maxHeight = $(this).height();}});
  $(this).each(function(){$(this).height(maxHeight)});
}


$(document).ready(function(){
  $(".orange").setMaxHeight();
  $(".green").setMaxHeight();
  $(".blue").setMaxHeight(); 
});

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

.green {
  background: green
}

.blue {
  background: blue;
}

.orange {
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>
<div >Lorem ipsum dolor sit amet, consectetur</div>
<div >Lorem ipsum dolor sit</div>
<br><br><br>
<div >Lorem ipsum dolor sit amet, consectetur</div>
<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>
<div >Lorem ipsum dolor sit</div>
<br><br><br>
<div >Lorem ipsum dolor sit<BR><BR><BR>zsasadsads<BR>adsadasdsa<BR>dsadsada<BR></div>
<div >Lorem ipsum dolor sit amet, consectetur</div>
<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, doloribus!</div>