どのように2つのDivの高さをお互いに等しくするには？

Question

ここではクラス行内に2つのブートストラップパネルがあります。
そして、いずれかのパネルの中の<div class="panel-body"></div>の中に何らかのデータ量が置かれていても、両方のパネルがお互いに等しくなるようにしようとしています。以下は

すべてのヘルプは高く評価されます私のhtml

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading">Panel Heading</div> 
 
       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
       <div class="panel-footer">Panel Footer</div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
      <div class="panel panel-default col"> 
 
       <div class="panel-heading">Panel Heading</div> 
 
       <div class="panel-body"> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 

 
       </div> 
 
       <div class="panel-footer">Panel Footer</div> 
 
      </div> 
 

 
     </div> 
 
    </div><br><br>

です。ありがとうございます

Answer 1

それは、このシナリオでmatchHeight.jsを使用することをお勧めします。

任意のコンポーネントに一致することができます。

panel-bodyと一致しました。コンテンツを追加すると、それが増えています。 penも同様です。

：サイズが縮小するにつれて、このプロパティは適用されません。 私によれば、不動産がまだ存在するならば、それは不必要なスクロールになります。ユーザーはすべての空白をスクロールする必要があります。

$(function() { 
 
    $('.panel-body').matchHeight(); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script> 
 
<div class="row-eq-height"> 
 
    <div class="col-md-6"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading">Panel Heading</div> 
 
     <div class="panel-body col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     <div class="panel-footer">Panel Footer</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
    <div class="panel panel-default col sec"> 
 
     <div class="panel-heading">Panel Heading</div> 
 
     <div class="panel-body col"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit 
 
     amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 

 
     </div> 
 
     <div class="panel-footer">Panel Footer</div> 
 
    </div> 
 

 
    </div> 
 
</div><br><br>

Answer 2

row-eq-heightをrowクラスに適用することができます。これにより、行のすべてのパネルが最も高いパネルに等しくなります。

は、例を参照してください：https://jsfiddle.net/m7jyh1ex/

Answer 3

最大計算された高さを取得し、すべてのdivのに割り当てる簡単なJSを書きます。 jQueryは必要ありません。

var panels = document.getElementsByClassName('panel-body'); 
 

 
var maxHeight = Array.prototype.map.call(panels, function(panel) { 
 
    return parseInt(getComputedStyle(panel).height, 10); 
 
    }) 
 
    .reduce(function(a, b) { 
 
    return Math.max(a, b); 
 
    }); 
 

 
for (var i = panels.length; i-- > 0;) { 
 
    panels[i].style.height = maxHeight + 'px'; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading">Panel Heading</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     <div class="panel-footer">Panel Footer</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    <div class="panel panel-default col"> 
 
     <div class="panel-heading">Panel Heading</div> 
 
     <div class="panel-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit 
 
     amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
     </div> 
 
     <div class="panel-footer">Panel Footer</div> 
 
    </div> 
 
    </div> 
 
</div>