即使调整了浏览器的大小，也使 div 高度相等答案

【问题标题】：Making equal div height even if the browser is resized即使调整了浏览器的大小，也使 div 高度相等
【发布时间】：2022-01-21 01:16:57
【问题描述】：

即使调整了浏览器的大小，我也试图使我的所有 div 高度相同。我有 4 个图标框。每个框都有一个图标、一个标题和一个描述。我想让它们都一样大。这意味着如果图标容器 div 的最高高度为 100px，则所有图标持有者 div 将为 100px。以下代码正在运行，但 如果我在某个时候调整浏览器的大小，容器 div 的高度会比实际高度大得多。我做错了什么？（注意调整大小只会发生在 767px 以上的屏幕尺寸）谢谢

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

【问题讨论】：

看起来CSS grid是你的朋友..？

标签： javascript jquery

【解决方案1】：

给所有四个项目一个类。例如，我用过myItem。

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 class="myItem one">
<h3>
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaa
</h3>
</div>

<div class="myItem two">
<h3>
bbbbbbbb
</h3>
</div>

<div class="myItem three">
<h3>
ccccccccccccccc
ccccccccc
</h3>
</div>

<div class="myItem four">
<h3>
ddddddddddddddd
ddddddddddd
ddddddddddddd
ddddddddddddddd
ddddddddddddddddd
</h3>
</div>

【讨论】：

一直输出0。你能重新检查一下代码吗
对不起，我的代码有错误。现在它正在工作。试试 sn-p。

【解决方案2】：

对于这种情况，有多种方法，我将提到两种最常见的方法（在我看来）：

【讨论】：