Making equal div height even if the browser is resized-CodePudding

I am trying to make all my divs the same height even if the browser is resized. I have 4 icon boxes. each box has an icon, a title, and a description. I want to make all of them same size. that means if the highest height of the icon container div is 100px all icon holder div will be 100px. the following code is working but if I resize the browser some time the height of the container divs is much bigger than the actual height. what I am doing wrong? (Note the resize will only happen screen size above 767px) thanks

 function allSameHeight(sameSec, sameImg, sameTitle, sameDesc) {
        jQuery(sameSec).each(function () {
          let highestImg = 0;
          let highestTitle = 0;
          let highestTxt = 0;
      
          jQuery(sameSec).find(sameImg).each(function () {
              if (jQuery(this).height() > highestImg) {
                highestImg = jQuery(this).height();
              }
            });
          jQuery(sameSec).find(sameTitle).each(function () {
              if (jQuery(this).height() > highestTitle) {
                highestTitle = jQuery(this).height();
              }
            });
      
          jQuery(sameSec).find(sameDesc).each(function () {
              if (jQuery(this).height() > highestTxt) {
                highestTxt = jQuery(this).height();
              }
            });
      
          if (jQuery(window).width() > 768) {
            jQuery(sameSec).find(sameImg).css("min-height", highestImg);
            jQuery(sameSec).find(sameTitle).css("min-height", highestTitle);
            jQuery(sameSec).find(sameDesc).css("min-height", highestTxt);
          } else {
            jQuery(sameSec).find(sameImg).css("min-height", "auto");
            jQuery(sameSec).find(sameTitle).css("min-height", "auto");
            jQuery(sameSec).find(sameDesc).css("min-height", "auto");
          }
        });
      }

CodePudding user response：

Give a class to all four items. I've used myItem for instance.

const setHeights = () => {
  let highestHeight = 0;
  //Loop through all elements and get the highest height
  $('.myItem').each((index, element) => {
    if($(element).outerHeight() > highestHeight) {
      highestHeight = $(element).outerHeight();
    }
  });
  //Set the height of all elements to highest
  $('.myItem').height(highestHeight);
};

$(window).resize(() => {
  //Run each time window is resized
  setHeights();
});

.myItem {
width: 25%;
color: white;
float: right;
}

.one {
background: red;
}

.two {
background: blue;
}

.three {
background: purple;
}

.four {
background: orange;
}

h3 {
word-wrap: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<button onclick="setHeights()">Make them equal</button>
</div>

<div >
<h3>
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaa
</h3>
</div>

<div >
<h3>
bbbbbbbb
</h3>
</div>

<div >
<h3>
ccccccccccccccc
ccccccccc
</h3>
</div>

<div >
<h3>
ddddddddddddddd
ddddddddddd
ddddddddddddd
ddddddddddddddd
ddddddddddddddddd
</h3>
</div>

CodePudding user response：

For this case there are multiple approaches, I'll mention the two most common (in my opinion):