如何在窗口调整大小时为等高子项重新加载 div

Question

我编写了脚本来赋予包装器的子元素相同的高度。它在页面加载时工作正常，但是当我调整大小或更改 ipad 的方向时..高度保持与页面加载期间相同。

$(window).on('load resize', function () {
     $('.equal-height-wrapper').each(function () {
     var heightArray = [];
     var allbox = $(this).find(".equal-height-box");
     $(allbox).each(function () {
     heightArray.push($(this).height());
     });
     var maxBoxHeight = Math.max.apply(Math, heightArray);
     $(this).find('.equal-height-box').css('height', maxBoxHeight);
     });
});

<div class="equal-height-wrapper">
  <div class="inner-wrapper">
    <div class="equal-height-box">

    </div>
    <div class="equal-height-box">

    </div>
  </div>
</div>

我想在子元素发生变化时更新它们的高度。到目前为止，我已经添加了溢出隐藏，以便隐藏任何重叠的文本。

我尝试将此脚本放在负载调整大小上，但没有任何区别。

Answer 1

将代码包装在命名函数中，以便您可以通过各种方式调用它。我会用$.ready 替换窗口.load。还添加了orientationchange 事件。然后你会得到类似的东西：

function setEqualHeight() {
  $('.equal-height-wrapper').each(function() {
    var heightArray = [];
    var allbox = $(this).find(".equal-height-box");
    $(allbox).each(function() {
    $(this).height("");  // remove previously set heights
    heightArray.push($(this).height());
    });
    var maxBoxHeight = Math.max.apply(Math, heightArray);
    $(this).find('.equal-height-box').css('height', maxBoxHeight);
  });
}

$(function() {
  $(window).on('resize', setEqualHeight);
  $(window).on('orientationchange', setEqualHeight);
  setEqualHeight();
});

Answer 2

为什么不只使用 CSS 呢？ 像这样的东西可以工作......

（已更新为使用 FIXED 容器高度和未知容器高度）

/* For fixed container HEIGHT */
.container-1 {
    display: block;
    width:150px;
    background-color:yellow;   
    height:200px;
}
.child-1 {
    width: 30px;
    background-color: red;
    display: inline-block;
    vertical-align: top;
    top:0px;
    bottom:0px;
    height:100%;
}
/* FOR UNKNOWN CONTAINER HEIGHT */
.container-2 {
    display: table;
    width:150px;
    background-color:yellow;   
}
.child-2 {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}

演示：http://jsfiddle.net/bkG5A/740/

您也可以考虑使用 CSS FLEX