在窗口上調整大小更改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);
});