Find max height of div by dynamic content in javascript

Question

I have one div and more than one data comes into this div by jstl tag. I want to find max content div height. I have seen one link but it is show in alert every time 20. element with the max height from a set of elements

JSP

     <div id="div-height" class='cat-product-name'>${i.name} </div>

JAVA SCRIPT

  $(window).load(function () {
  var maxHeight = Math.max.apply(null, $("#div-height").map(function ()
                {
                    return $(this).height();
                }).get());
                alert(maxHeight);
});

I want to find max height of div and set this height of every div.

score 6 · Accepted Answer · edited May 23 '17 at 11:53

6

You can try this:-

$(document).ready(function() {
  var maxHeight = -1;

  $('.cat-product-name').each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight :     $(this).height();
 });

 $('.cat-product-name').each(function() {
   $(this).height(maxHeight);
 });
});

Reference - Use jQuery/CSS to find the tallest of all elements

edited May 23 '17 at 11:53

Community

1
1

answered Feb 20 '16 at 09:56

khushboo29

906
6
16

thanks for save my time. If u like my answer then please voting up to help others. – Varun Sharma Feb 20 '16 at 09:59
1

Yes it will work on images, it all depends on which all elements height you are concerned with and then set image(s) height the max value - $(this).find("img").height(maxHeight); – khushboo29 Feb 20 '16 at 10:24

score 0 · Answer 2 · edited Sep 30 '19 at 09:25

0

Each element id on the page must be unique, i.e. you can't have multiple elements with

id="div-height"

Try using class instead (class="div-height"). Note you'll have to adjust your jQuery selector as well to

$(".div-height")

edited Sep 30 '19 at 09:25

JON

965
2
10
28

answered Feb 20 '16 at 09:37

Emmett

14,035
12
56
81

It is correct but how to assign this height in div. – Varun Sharma Feb 20 '16 at 09:43

score 0 · Answer 3 · answered Jul 29 '21 at 19:39

A modern take to this problem is the usage of css flex-box with align-items: stretch; :

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  
  width: 250px;
}

.container>div {
  flex: 0 0 100px;
  outline: 5px solid #888;
  padding: 10px;
}

<div class="container">
  <div>Small content</div>
  <div>This divs content needs more height than their siblings!</div>
  <div>Some more text</div>
  <div>Other text</div>
</div>

Find max height of div by dynamic content in javascript

3 Answers3