通过javascript中的动态内容查找div的最大高度答案

【问题标题】：Find max height of div by dynamic content in javascript通过javascript中的动态内容查找div的最大高度
【发布时间】：2016-06-01 23:19:10
【问题描述】：

我有一个 div 并且不止一个数据通过 jstl 标签进入这个 div。我想找到最大内容 div 高度。我看过一个链接，但每次 20 时都会显示警报。 element with the max height from a set of elements

JSP

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

JAVA 脚本

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

我想找到 div 的最大高度并设置每个 div 的高度。

【问题讨论】：

标签： javascript jquery jsp jstl

【解决方案1】：

你可以试试这个：-

$(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);
 });
});

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

【讨论】：

感谢您节省了我的时间。如果您喜欢我的回答，请投票帮助他人。
是的，它适用于图像，这完全取决于您关注的所有元素高度，然后将图像高度设置为最大值 - $(this).find("img") .height(maxHeight);

【解决方案2】：

页面上的每个元素 id 必须是唯一的，即你不能有多个元素

id="div-height"

尝试改用类 (class="div-height")。请注意，您还必须将 jQuery 选择器调整为

$(".div-height")

【讨论】：

是正确的但是如何在div中分配这个高度。

【解决方案3】：

解决这个问题的现代方法是将 css flex-box 与 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>

【讨论】：