javascript - 将相同高度的 div 应用于另一个 div，并在调整大小时进行填充

Question

我的一个div中有3个div。 我想对所有具有最大高度的div应用相同的div高度。 不仅是第一次，而且屏幕在响应时调整大小。

这是我的 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，尽管现在它对于第三个 div 的高度是静态的。

$('.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());
});

这是FIDDLE

Answer 1

这是我经常用来完成您所说的事情的脚本。

// 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 e.g
  $('.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>