gleiche Höhe auf Div bei der Erweiterung

Question

Ich oft in ein Problem laufen, wo es dauert zu lange für mich zu lösen. Ich möchte, dass die Bootstrap-Boxen im Boden die gleiche Höhe haben. Ich habe versucht, eine Höhe in px in meiner CSS zu setzen, aber das vermasselt alles. Ich habe auch versucht, es mit% zu setzen, aber das funktioniert nicht. Also, wie ist der richtige Weg, um die Höhe einzustellen, so dass alle Boxen auf gleiche Höhe expandieren, wenn ich etwas Text hinzufügen, wird die Box die Höhe ändern?

Portfolio

HTML (nur 1 col hier eingefügt, so dass der Code füllen nicht so viel)

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"); 
 
.panel-pricing { 
 
    -moz-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    -webkit-transition: all .3s ease; 
 
} 
 
h3.panel-pricing { 
 
    color: #999; 
 
    font-size: 20px; 
 
} 
 
.panel-pricing .panel-heading { 
 
    padding: 20px 10px; 
 
} 
 
.panel-pricing .panel-heading .fa { 
 
    margin-top: 10px; 
 
    font-size: 58px; 
 
} 
 
.panel-pricing .list-group-item { 
 
    color: #777777; 
 
    border-bottom: 1px solid rgba(250, 250, 250, 0.5); 
 
} 
 
.panel-pricing .list-group-item:last-child { 
 
    border-bottom-right-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
} 
 
.panel-pricing .list-group-item:first-child { 
 
    border-top-right-radius: 0px; 
 
    border-top-left-radius: 0px; 
 
} 
 
.panel-pricing .panel-body { 
 
    background-color: #f0f0f0; 
 
    font-size: 40px; 
 
    color: #777777; 
 
    padding: 20px; 
 
    margin: 0px; 
 
}

<section id="plans"> 
 
    <div class="container"> 
 
    <div class="row"> 
 

 
     <!-- item --> 
 
     <div class="col-md-4 text-center"> 
 
     <div class="panel panel-danger panel-pricing"> 
 
      <div class="panel-heading"> 
 
      <i class="fa fa-money" aria-hidden="true"></i> 
 
      <h3>Plan 1</h3> 
 
      </div> 
 
      <div class="panel-body text-center"> 
 
      <p><strong>$100/Month</strong> 
 
      </p> 
 
      </div> 
 
      <ul class="list-group text-center"> 
 
      <li class="list-group-item"><i class="fa fa-check"></i> Personal use</li> 
 
      <li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li> 
 
      <li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li> 
 
      </ul> 
 
      <div class="panel-footer"> 
 
      <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Update css und fügen min-height

.panel-pricing .panel-body { 
    background-color: #f0f0f0; 
    font-size: 40px; 
    color: #777777; 
    padding: 20px; 
    margin: 0px; 
    min-height: 115px; 
}