窗口大小改变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

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

它可以通过使用类似来完成。

结帐上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 2

你可以通过所有。内容块的元素循环，检查是否电流。内容块的高度比最高高度发现已经较高。如果是这样，覆盖它并最终将所有.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 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); 
});