Jquery Solution for Same auto height for different HTML div Classes

Question

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

CSS Solutions are available if you want instead of jQuery: https://stackoverflow.com/questions/2114757/css-equal-height-columns — imvain2, Jul 29 '22 at 18:40
Thanks for your reply. Flex box height is only working inside div classes. So I am looking for jquery solution.. — Vivek Vivi, Jul 29 '22 at 18:54

imvain2 · Accepted Answer · 2022-07-29T19:35:53.787

0

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 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<BR><BR><BR>zsasadsads<BR>adsadasdsa<BR>dsadsada<BR></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>

edited Jul 29 '22 at 19:35

answered Jul 29 '22 at 19:13

imvain2

15,480
1
16
21

Wow.. It's working.. Can you give me different jquery function for each class ? I mean like this; – Vivek Vivi Jul 29 '22 at 19:24
$(".green").each(function(){if($(this).height() > maxHeight){maxHeight = $(this).height();}}); $(".green").each(function(){$(this).height(maxHeight)}); $(".blue").each(function(){if($(this).height() > maxHeight){maxHeight = $(this).height();}}); $(".blue").each(function(){$(this).height(maxHeight)}); $(".orange").each(function(){if($(this).height() > maxHeight){maxHeight = $(this).height();}}); $(".orange").each(function(){$(this).height(maxHeight)}); – Vivek Vivi Jul 29 '22 at 19:25
Each class function is different. Like that.. I think you understand my idea.. I need each class height seperately. because each classes using in different area of page.. – Vivek Vivi Jul 29 '22 at 19:27
Result Like this : https://prnt.sc/qa-8dSl2aJAn – Vivek Vivi Jul 29 '22 at 19:32
@VivekViviI updated my answer with a reusable function. Now you just have to pass in the class selector, and it will find and set the height for that group. – imvain2 Jul 29 '22 at 19:37
Is it work as like this : https://prnt.sc/i4hmyQJD2TBd ?? – Vivek Vivi Jul 29 '22 at 19:42
@VivekVivi, yes now the maxHeight is set per "group" so orange can have a different height then green and blue etc.. – imvain2 Jul 29 '22 at 19:43
I marked your answer as accepted.. Thank you very much for your help.. :) :) – Vivek Vivi Jul 29 '22 at 19:46

Jquery Solution for Same auto height for different HTML div Classes

1 Answers1