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>

我希望在更改时更新子元素的高度。截至目前，我已经添加了隐藏的溢出，以便重叠的任何文本都被隐藏。

我尝试将此脚本放在load resize上，但它没有任何区别。

Answer 1

为什么不只使用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

Answer 2

在命名函数中包装代码，以便您可以通过各种方式调用它。我将.load替换为$.ready。还添加了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();
});

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

2 个答案: