javascript - 在窗口调整大小更改 div 高度

Question

.content-block类内容动态文本，因此每个块的高度不同。有没有办法在调整窗口大小时获得最大高度.content-block并应用于所有其他.content-block？

.content-block{
    height: 72px;
    display: block;
}

<div class="content-block">
    <span><img src='a.png'/></span>
    <span>
        <B>Lorem Ipsum</b>
        when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </span>

    <span><img src='b.png'/></span>
    <span>  
        <b>Lorem Ipsum</b>
        is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
    </span>
</div>

Answer 1

您可以遍历所有 .content-block 元素，检查当前 .content-block 的高度是否高于已经找到的最高高度。如果是这样，覆盖它，最后将所有 .content-block 元素的高度设置为 iMaxHeight。

它可以通过使用类似的东西来完成：

$(document).ready(function() { 
  var iMaxHeight = 0;
  $('.content-block').each(function() { 
    if($(this).css('height') > iMaxHeight) { 
      iMaxHeight = $(this).css('height');
    }
  }
  $('.content-block').css('height', iMaxHeight);
}

Answer 2

有几种方法可以做到这一点。

在jsfiddle上查看此示例

function getMaxHeight(){
    return maxHeight = Math.max.apply(null, $(".content-block").map(function (){
        return $(this).height();
    }).get());
}

$(window).resize(function(){
    $('.content-block').css('height', 'auto');
    $('.content-block').css('height', getMaxHeight);
});

$('.content-block').css('height', getMaxHeight);

Answer 3

在这里检查你的答案。我添加了另一个 div 来向您展示演示，还为 div 添加了背景。

http://jsfiddle.net/Lxtn4

HTML：

<div class="content-block" id="getmax"> <span><img src='a.png'/></span>
 <span><B>Lorem Ipsum</b>when an unknown printer took a galley of  type and scrambled it to make a type specimen book</span>
 <span><img src='b.png'/></span>
 <span>  
  <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.    
  Lorem Ipsum has
  </span>

</div>
<br>
<div class="content-block">My div</div>

CSS：

.content-block {
    height: 72px;
    display: block;
    background:blue;
}

JS：

$(window).resize(function () {
    var x = $("#getmax").height();
    $(".content-block").css("height", x);
});