Dynamische Änderung der Höhe zum höchsten div auf der Fenstergröße

Question

Ich versuche, jQuery zu verwenden, um einen Satz div auf die Höhe des höchsten div einzustellen. Ich habe die anfängliche Funktion funktionierend, wo sie die Seite bekommt und sie auf den Rest der divs auf der Seite anwendet.

Ich versuche auch, die Höhe des Div in Größe neu zu berechnen. In JSfiddle können Sie sehen, dass der Text bei der Verkleinerung aus der Karte/dem Div erweitert wird.

Ich habe versucht, die Funktion in die Funktion zum Ändern der Größe zu setzen, aber nicht erneut auslösen. Ich bin mir nicht sicher, was ich falsch mache.

Ich bin ein JS Anfänger, Entschuldigung.

HTML

<div class="fluid-container grey-bg"> 
     <div class="container"> 

      <div class="card-default width-25 items"> 
       <div class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi. 
       </div> 
      </div> 

      <div class="card-default width-25 spacer items"> 
       <div class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste 
       </div> 
      </div> 

      <div class="card-default width-25 spacer items"> 
       <div class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus! 
       </div> 
      </div> 

      <div class="card-default width-25 items"> 
       <div class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.card-default { 
    background-color: #fff; 
    border-radius: 10px; 
    color: #333333; 
    min-height: 100px; 
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25); 
    box-sizing: border-box; 
    padding: 20px 0px; 
    text-align: center; 
    margin-bottom: 20px; 
    display: block; 
    float: left; 
    position: relative; 
    width: 100%; 
} 

.card-default.width-25 { 
    width: 23%; 
    margin-left: 0px; 
    margin-right: 0px; 
    padding: 20px 20px; 
} 

JS

function cardEqualHeight() { 
    var maxHeight = -1; 

    $('.items').each(function() { 
     maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height(); 
    }); 

    $('.items .content').each(function() { 
     $(this).height(maxHeight); 
    }); 
} 
cardEqualHeight(); 

https://jsfiddle.net/k3lh4m/7wmfox9m/

Answer 1

Fügen Sie diese auf der containter Klasse und verwenden Sie nicht Ihre JS Funktion und los gehts!

.container { 
    display: flex; 
    flex-wrap: wrap; 

} 

jsfiddle