40

我想用 jQuery 为 div 设置相等的高度。所有的 div 可能有不同的内容量和不同的默认高度。这是我的 html 布局示例：

<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>

我正在使用下一个 jQuery 函数设置高度：

$(document).ready(function(){

    var highestBox = 0;
        $('.container .column').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.container .column').height(highestBox);

});

这很好用，但在我的情况下不行，因为我希望所有“列”仅在一个“容器”内相等。这意味着在第一个容器中，所有框必须与第一个 div 一样高，但在第二个容器中，它们必须等于第二列。

所以问题是——我应该如何修改我的 jQuery 来达到这个目的？

谢谢！

4

17 回答 17

104

回答您的具体问题

您的代码正在检查任何容器中的所有列，您需要做的是：

  • 循环遍历每个容器
    • 获取该容器内每一列的高度
    • 找到最高的
    • 在移动到下一列之前，将该高度应用于该容器中的每一列。

注意：尝试提供您的问题的示例 jsfiddle，它使我们能够更轻松地帮助您并理解问题，您可以立即看到有效的解决方案，并鼓励更快的响应。

快速（粗略）示例

$(document).ready(function(){

    // Select and loop the container element of the elements you want to equalise
    $('.container').each(function(){  
      
      // Cache the highest
      var highestBox = 0;
      
      // Select and loop the elements you want to equalise
      $('.column', this).each(function(){
        
        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height(); 
        }
      
      });  
            
      // Set the height of all those children to whichever was highest 
      $('.column',this).height(highestBox);
                    
    }); 

});
.container { border 1px solid red; }
.column { border: 1px solid blue; float:left; width: 30%; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>


图书馆！

这是我发现的一个库，如果你想要一些更聪明的均衡控制，它看起来很有希望

http://brm.io/jquery-match-height-demo/


解决@Mem 的问题

问题：$(document).ready()如果您有需要加载的图像又会修改容器的高度，是否会起作用？


图像加载后均衡高度

如果您正在加载图像，您会发现此解决方案并不总是有效。这是因为document.ready在尽可能早的时间被触发，这意味着它不会等待外部资源（例如图像）被加载。

当您的图像最终加载时，它们可能会在均衡脚本运行后扭曲其容器的高度，导致它看起来也不太工作。


用图像解决均衡高度

  1. 绑定到图像加载事件

这是最好的解决方案（在撰写本文时），涉及绑定到img.load事件。您所要做的就是计算有多少 img $('img').length，然后为每个img 计数load，-1从该计数直到您达到零，然后触发均衡器。

load如果图像在缓存中，此处的警告可能不会在所有浏览器中触发。看看google/github，应该有一个解决方案脚本在那里。在撰写本文时，我发现了来自 Alexander Dickson 的 waitForImages（未经测试，这不是背书）。

  1. 另一个更可靠的解决方案是window.load事件。这通常应该始终有效。但是，如果您查看文档，您会注意到在加载所有外部资源后会触发此事件。这意味着如果您的图像已加载但有一些 javascript 等待下载，则在完成之前不会触发。

如果您异步加载大部分外部组件并且巧妙地最小化、压缩和分散负载，您可能不会对这种方法有任何问题，但是突然变慢的 CDN（一直发生）可能会导致问题。

在这两种情况下，您都可以采取愚蠢的方法并应用回退计时器。让均衡脚本在设定的几秒钟后自动运行，以防事件未触发或速度慢到您无法控制的情况。这不是万无一失的，但实际上，如果您正确调整计时器，您将通过此回退满足 99% 的访问者。



多年后，这仍然得到了支持，如今，随着 flexbox 的广泛支持，您可能只想为此考虑纯 CSS，除非您使用 JS 有特定原因

.container {
  display: flex;
  border: 2px dashed red;
  margin: 10px 0;
}

.container > .column { 
 padding: 10px;
}

.container.fill-width {
  justify-content: stretch;
}

.container.fill-width>.column {
  flex-grow: 1
}

.container>.column:nth-child(1) {
  background: yellow;
}

.container>.column:nth-child(2) {
  background: blue;
}

.container>.column:nth-child(3) {
  background: green;
}
<div class="container">
  <div class="column">Some<br>text</div>
  <div class="column">Some<br>more<br>text<br>here</div>
  <div class="column">One line</div>
</div>
<div class="container">
  <div class="column">Some<br>more<br>even<br>longer<br>text<br>here</div>
  <div class="column">Some<br>text</div>
  <div class="column">One line</div>
</div>
<div class="container fill-width">
  <div class="column">Some<br>more<br>text<br>here</div>
  <div class="column">Some<br>text</div>
  <div class="column">One line</div>
</div>

于 2012-07-27T13:08:09.730 回答
11 
$(document).ready(function(){

    $('.container').each(function(){  
        var highestBox = 0;

        $(this).find('.column').each(function(){
            if($(this).height() > highestBox){  
                highestBox = $(this).height();  
            }
        })

        $(this).find('.column').height(highestBox);
    });    


});
于 2012-07-27T13:08:46.330 回答
7

你需要这个：

$('.container').each(function(){  
     var $columns = $('.column',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});

解释

  • 以下代码段构造了一个高度数组：

    $columns.map(function(){
    return $(this).height();
}).get()

  • Math.max.apply( Math, array )找到数组项的最大值

  • $columns.height(maxHeight);将所有列的高度设置为最大高度。

现场演示

于 2012-07-27T13:10:25.737 回答
5

重要改进！（我添加了 $(this).height('auto'); 在测量高度之前 - 我们应该将其重置为自动。然后我们可以在调整大小时使用此功能）

function equalheight () {
            $('.cont_for_height').each(function(){  

                var highestBox = 0;
                $('.column_height', this).each(function(){

                    var htmlString = $( this ).html()

                    ;


                $(this).height('auto');

                    if($(this).height() > highestBox) 
                       highestBox = $(this).height(); 
                });  

                $('.column_height',this).height(highestBox);

        });  

        }
于 2014-09-26T06:44:15.313 回答
3

这是我在同一高度设置块的版本...例如，您有一个 div 包含名称为“col”的 div

$('.col').parent().each(function() {
    var height = 0,
        column = $(this).find('.col');
    column.each(function() {
        if ($(this).height() > height) height = $(this).height();
    });
    column.height(height);
});
于 2014-07-21T10:10:55.417 回答
2

You need imagesLoaded if the container have images inside. This works for responsive too.

$(document).ready(function () { 
     equalHeight('.column');
});
$(window).resize(function(){equalHeight('.column');});

function equalHeight(columnClass){
    $('.eq-height-wrap').imagesLoaded(function(){
        $('.eq-height-wrap').each(function(){  

            var maxHeight = Math.max.apply(null, $(this).find(columnClass).map(function ()
            {
                return $(this).innerHeight();
            }).get());

            $(columnClass,this).height(maxHeight);
        });
    });
}
于 2015-08-14T15:38:43.223 回答
1

您也可以以这种方式编写函数这有助于一次构建您的代码，只需在最后添加类名或 ID

function equalHeight(group) {
               tallest = 0;
               group.each(function() {
                  thisHeight = jQuery(this).height();
                  if(thisHeight > tallest) {
                     tallest = thisHeight;
                  }
               });
               group.height(tallest);
            }
            equalHeight(jQuery("Add your class"));
于 2015-01-21T06:25:13.860 回答
1
于 2015-02-13T08:16:45.873 回答
1 
  <script>
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".column"));
});
</script>
于 2015-05-19T05:16:22.883 回答
1

So, below the jquery script to set the equal height to column which Math.max will calculate the two divs height and takes the highest height either it may be left or right.

$(document).ready(function() {
var Equalheights = Math.max($(“#left”).height(), $(“#right”).height());
$(“#left”). Equalheights(d);
$(“#right”). Equalheights(d);
});
Highest height will be assigned to both left and right divs

Live Demo

于 2018-07-04T13:32:31.250 回答
1

I wish i'd read this post before I (with help from Earl) created this one

setMaxHeightForTitles($column, $title) {
      var maxHeight = 0;
      $column.find($title)
      .each(function(index, title){
        var height = $(title).height();
        if  (height > maxHeight) maxHeight = height;
      })
      .each(function(index, title){
        $(title).height(maxHeight);
      });
  }
于 2019-01-11T17:05:23.523 回答
1

Here is what worked for me. It applies the same height to each column despite their parent div.

$(document).ready(function () {    
    var $sameHeightDivs = $('.column');
    var maxHeight = 0;
    $sameHeightDivs.each(function() {
        maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });
    $sameHeightDivs.css({ height: maxHeight + 'px' });
});

Source

于 2019-12-27T12:59:21.017 回答
0

您可以使用.parent()API 访问每个单独的容器。

像，

var highestBox = 0;
        $('.container .column').each(function(){  
                if($(this).parent().height() > highestBox){  
                highestBox = $(this).height();  
        }
    });
于 2012-07-27T13:03:23.907 回答
0

There is a jQuery plugin for this exact purpose: https://github.com/dubbs/equal-height

If you want to make all columns the same height, use:

$('.columns').equalHeight();

If you want to group them by their top position, eg. within each container:

$('.columns').equalHeight({ groupByTop: true });
于 2016-05-23T23:08:36.720 回答
0 
function setEqualHeight(columns) {
  var tallestColumn = 0;

  columns.each(function(){
    var currentHeight = $(this).height();

    if(currentHeight > tallestColumn){
      tallestColumn  = currentHeight;
    }
  });

  columns.height(tallestColumn);
}

=> setEqualHeight($('.column'));
于 2016-09-19T07:25:09.120 回答
0 
// Select and loop the container element of the elements you want to equalise
        $('.equal').each(function(){  

          // Cache the highest
          var highestBox = 0;

          // Select and loop the elements you want to equalise
          $('.col-lg-4', this).each(function(){

            // If this box is higher than the cached highest then store it
            if($(this).height() > highestBox) {
              highestBox = $(this).height(); 
            }

          });  

          // Set the height of all those children to whichever was highest 
          $('.col-lg-4',this).height(highestBox);

        }); 

    });
于 2017-04-10T14:16:44.710 回答
0 
<div class('a')>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
</div>
<div class('b')>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
</div>
var a = ['.a','.b'];
a.forEach(function(value) {
    var column = 0;
    $(value).find('.cols-to-eq').each(function(){
        if($(this).height() > column){
            column = $(this).height();
        }
    });
    $(value).find('.cols-to-
    eq').attr('style','height:'+column+'px');
   });
于 2017-09-07T13:02:49.590 回答