DIV匹配具有不同纵横比的其他div的高度响应与JQuery答案

【问题标题】：DIV match height of other div with different aspect ratio responsively with JQueryDIV匹配具有不同纵横比的其他div的高度响应与JQuery
【发布时间】：2017-07-24 10:56:24
【问题描述】：

我正在使用 JQuery 使 DIV 具有与其宽度相同的高度并响应更新。

我还需要使另一个 DIV（具有不同的纵横比）保持与方形 div 相同的高度。

See fiddle

即使在调整浏览器窗口大小时，黑色 DIV 也应与红色和白色 div 的高度匹配。

function update() {
  $(".match").each(function() {
    var height = $(this).width();
    console.log(height);
    $(this).css('height', height + 'px');
  });
}

update();
$(window).resize(function() {
  update();
});

.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 2000px;
  background-color: #333333;
}

.square {
  width: 10%;
  background-color: #ffffff;
  float: left;
}

.oblong {
  width: 40%;
  float: left;
  max-height: 150px;
  background-color: #000000;
}

.color {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="main">
    <div class="oblong match"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
  </div>

【问题讨论】：

所以你想要的输出
如果我理解正确，当您调整窗口大小时，您想将 div“长方形匹配”调整为与另一个相同的尺寸吗？

标签： jquery html css match

【解决方案1】：

只需在循环外分配变量，然后您将高度的值分配给循环中的变量，并在退出循环后使用它来更新元素的高度，如下所示：

var height = 0;
function update() {
 $(".match" ).each(function () {
  height = $(this).width();
    console.log(height);
    $(this).css('height',height + 'px'); 
 }); 
 $(".oblong" ).css('height',height + 'px');
}

【讨论】：

【解决方案2】：

您已将max-height:150 应用到类'.oblong. Remove it. it shoud work. Please see updatedhttps://jsfiddle.net/jignesh221290/cL8s5La5/2/`

【讨论】：

黑色 DIV 应与红色和白色 div 的高度匹配

【解决方案3】：

我在盒子周围添加了一个包装器，并将其显示为一个 flexbox。我从黑匣子中删除了 match 类，因此高度不会被重新计算，而是自动分配。

function update() {
  $(".match").each(function() {
    var height = $(this).width();
    console.log(height);
    $(this).css('height', height + 'px');
  });
}

update();
$(window).resize(function() {
  update();
});

.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 2000px;
  background-color: #333333;
}

.toprow {
  display: flex;
}

.square {
  width: 10%;
  background-color: #ffffff;
}

.oblong {
  width: 40%;
  max-height: 150px;
  background-color: #000000;
}

.color {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="toprow">
    <div class="oblong"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
  </div>
</div>

【讨论】：