ブートストラップパネル - 同じ外側の高さと同じパネル本体の高さ

Question

それぞれにどれくらいの内容があるかにかかわらず、3つのBootsrapパネル（.panel）を同じ高さ（.row）で同じ高さにする必要があります。 jquery.matchHeight.jsライブラリ（https://github.com/liabru/jquery-match-height）を使って各.panelの外側の高さを設定することができました。しかし、私は内部の高さを同じにすることができませんでした（.panel-body divの高さ）。 .panelと.panel-bodyの高さを100％に設定しようとしましたが、.panel-body divの背景色が、.rowの高さを超えて延びていました。

私はアクションで問題を確認するために作成jsfiddleを見てみてください：https://jsfiddle.net/vpdq2ugb/21/

<div class="row"> 

    <div class="col-md-3 site-component" style="background-color: pink;"> 

    <div class="panel panel-default"> 
     <div class="panel-heading" style="background-color: rgba(240,90,40,0.8);">Panel 1</div> 
     <div class="panel-body" style="background-color: rgba(240,90,40,0.2);"> 
     sdf sjdf jsdj g egjjweg 
     </div> 
    </div> 

    </div> 

    <div class="col-md-3 site-component" style="background-color: pink;"> 

    <div class="panel panel-default"> 
     <div class="panel-heading" style="background-color: rgba(247,147,29,0.8);">Panel 2</div> 
     <div class="panel-body" style="background-color: rgba(247,147,29,0.2);"> 
     sdf sjdf jsdj g egjjweg sjdgjsg ie wengieg jskdkg e gjwe jg wefmwegjw eg wjegjwegjwjg kd 
     fdsljg e rgi re vmeb,enb eb ejrke gmer mgeirg s gneirg er gmwefi3 igr mgierg mw egiewrg 
     </div> 
    </div> 

    </div> 

    <div class="col-md-3 site-component" style="background-color: pink;"> 

    <div class="panel panel-default"> 
     <div class="panel-heading" style="background-color: rgba(55,208,0,0.8);">Panel 3</div> 
     <div class="panel-body" style="background-color: rgba(55,208,0,0.2);"> 
     sdf sjdf jsdj g egjjweg sjdgjsg ie wengirgeg wrey yu yubrb zdxc xev 
     </div> 
    </div> 

    </div> 

</div> 

に注意してください：私はこれが応答する必要があります。画面のサイズが十分に広い場合にのみ、.panelsを垂直にします。

また、既によく似た質問が投稿されています。しかし、以前の投稿のいずれも内部高さ（.panel-body divの高さ）の問題に対処していませんでした。

ありがとうございます！

Answer 1

問題がmatchHeight実行後のCSSがそのように、ブラウザによって解釈されていることで、panel {height: 100%}は無意味です。あなたもpanel-body上matchHeight()を実行する必要があり

..

$('.panel-body').matchHeight();

https://jsfiddle.net/rtq64o8d/

Answer 2

ピンクの背景divを、3つのパネルすべてを囲むラッパーとして使用してください。バックグラウンドは分離しないでください。次にoverflow:autoを実行します。このラッパーは、定義された高さを持つ必要があります。 100％の高さのパネルボディ、パネル、およびdivのスタイルを設定します。ここで

はbootplyです：http://www.bootply.com/svJMjYtLso