将相同高度的div应用于其他div，并在调整大小时进行填充

Question

I have 3 divs in a div. I want to apply same height of div to all the div who has maximum height. Not just at first time but also if screen resizes as it's responsive.

Here is my html

<div class="mid-box-mid row"> 
                <!-- Featured Box 1 -->
                <div class="mid-box col-xs-12 col-sm-4">
                    <div class="skt-iconbox iconbox-top">       
                                <h4>Population<br><span>Health management</span></h4>
                    </div>      
                    <div class="iconbox-content">       
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
                    </div>          
                    <div class="clearfix"></div>    
                </div>
  <!-- Featured Box 3 -->
                <div class="mid-box col-xs-12 col-sm-4">
                    <div class="skt-iconbox iconbox-top">       
                                <h4>Population<br><span>Health management</span></h4>
                    </div>      
                    <div class="iconbox-content">       
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
                    </div>          
                    <div class="clearfix"></div>    
                </div>
  <!-- Featured Box 3 -->
                <div class="mid-box col-xs-12 col-sm-4">
                    <div class="skt-iconbox iconbox-top">       
                                <h4>Population<br><span>Health management</span></h4>
                    </div>      
                    <div class="iconbox-content">       
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
                      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.  
                    </div>          
                    <div class="clearfix"></div>    
                </div>
</div>

css

.mid-box-mid{
    background-color:green;
}
.mid-box{
    background-color:red;
    padding:80px 40px;
}

javascript although right now it's static for the 3rd div's height.

$('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());

$( window ).resize(function() {
  $('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});

Here is the FIDDLE

Answer 1

you can use the .resize function. Your code will be executed every time screen size changes and will keep your divs size syncrhonized.

$( window ).resize(function() {
  $('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});

please check this link to further reference:

jQuery resize

Answer 2

This is a script I used often to do exactly what you're talking about.

 // The Function jQuery.fn.equalCols = function () { $(this).css({'height' : ''}); // Array Sorter var sortNumber = function (a, b) { return b - a; }; var heights = []; // Push each height into an array $(this).each(function () { heights.push($(this).outerHeight()); }); heights.sort(sortNumber); var maxHeight = heights[0]; return this.each(function () { // Set each column to the max height $(this).css({'height': maxHeight}); }); }; //Usage jQuery(function($){ //Select the columns that need to be equal eg $('.mid-box').equalCols(); }); // Adjusts DIV size on widow Resize $(window).resize(function () { $('.mid-box').equalCols(); }); 

 .mid-box-mid{ background-color:green; } .mid-box{ background-color:red; padding:80px 40px; margin:5px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mid-box-mid row"> <!-- Featured Box 1 --> <div class="mid-box col-xs-12 col-sm-4"> <div class="skt-iconbox iconbox-top"> <h4>Population<br><span>Health management</span></h4> </div> <div class="iconbox-content"> Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently. </div> <div class="clearfix"></div> </div> <!-- Featured Box 3 --> <div class="mid-box col-xs-12 col-sm-4"> <div class="skt-iconbox iconbox-top"> <h4>Population<br><span>Health management</span></h4> </div> <div class="iconbox-content"> Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently. </div> <div class="clearfix"></div> </div> <!-- Featured Box 3 --> <div class="mid-box col-xs-12 col-sm-4"> <div class="skt-iconbox iconbox-top"> <h4>Population<br><span>Health management</span></h4> </div> <div class="iconbox-content"> Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently. Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently. </div> <div class="clearfix"></div> </div> </div>