窗口大小改變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); 
});