divの高さを計算する

Question

div 2つを同じ高さにしたいと考えています。しかし、1つのdivは小さいものから1つは背が高いものです。私はいつも同じにすることができる方法を説明することができますか？

ここにいくつかのコードを持っている：

$(function() { 
    var a = $(.box1); 
    var b = $(.box2); 

    function calcHeight(a, b){ 
    if (a.height() > b.height()) { 
    b.css("height", a); 
    } else { 
    a.css("height", b); 
    } 
    } 

    calcHeight(a,b) 

    $(window).on('resize', function(){ 
    calcHeight(a,b) 
    }) 
}) 
<div class="flexcontainer"> ---rows are in flex-direction: row; 
<div class="row1"> --- boxes are one below other 
    <div class="box1"></div> 
    <div class="box2"></div> 
</div> 
<div class="row2"> 
    <div class="box3"></div> --- This box is full-height 
</div> 
<div class="row3"> --- boxes are one below other 
    <div class="box4"></div> 
    <div class="box5"></div> 
</div> 
</div> 

を私はbox5とbox2が常に同じ高さになりたいです。

ありがとうございます！

Answer 1

たぶん、あなたは次のことを試すことができます。

$(function() { 
 
    var a = $('.box1'); 
 
    var b = $('.box2'); 
 

 
    function calcHeight(a, b){ 
 
    var max_height = Math.max(a.height(), b.height())+'px'; 
 
    a.css('height', max_height); 
 
    b.css('height', max_height); 
 
    } 
 

 
    calcHeight(a,b) 
 

 
    $(window).on('resize', function(){ 
 
    calcHeight(a,b) 
 
    }) 
 
})

<div class="flexcontainer"> ---rows are in flex-direction: row; 
 
<div class="row1"> --- boxes are one bolow other 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
</div> 
 
<div class="row2"> 
 
    <div class="box3"></div> --- This box is full-height 
 
</div> 
 
<div class="row3"> --- boxes are one bolow other 
 
    <div class="box4"></div> 
 
    <div class="box5"></div> 
 
</div> 
 
</div>