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虽然现在它对于第3个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

您可以使用.resize功能。每当屏幕尺寸发生变化时，您的代码都会被执行，并且会保持您的div大小同步。

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

请查看此链接以进一步参考：

jQuery resize

Answer 2

这是我经常使用的一个脚本，正是你所说的。

＆＃13;

// 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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: