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

});

これは正常に機能しますが、私の場合はそうではありません。なぜなら、すべての「列」を 1 つの「コンテナー」内でのみ等しくしたいからです。つまり、最初のコンテナではすべてのボックスが最初の div と同じ高さでなければなりませんが、2 番目のコンテナでは 2 番目の列と同じでなければなりません。

質問は、これに到達するために 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し、それぞれloadについて-1、そのカウントからゼロになるまで、イコライザーを起動することです。

ここでの注意点はload、画像がキャッシュにある場合、すべてのブラウザーで起動しない可能性があることです。google/github を見回すと、そこにソリューション スクリプトがあるはずです。これを書いている時点で、Alexander Dickson の waitForImages を見つけました(未テスト、これは推奨ではありません)。

  1. もう 1 つの信頼性の高いソリューションは、window.loadイベントです。これは通常、常に機能するはずです。ただし、ドキュメントを確認すると、すべての外部リソースが読み込まれた後にこのイベントが発生することがわかります。これは、画像が読み込まれているが、ダウンロードを待っている JavaScript がある場合、それが完了するまで起動しないことを意味します。

外部データの大部分を非同期でロードし、負荷を最小限に抑え、圧縮し、分散することに長けている場合、おそらくこの方法で問題が発生することはありませんが、CDN が突然遅くなると (常に発生します)、問題が発生する可能性があります。

どちらの場合も、ばかげたアプローチを取り、フォールバック タイマーを適用することができます。イベントが発生しない場合、または何かが制御不能な場合に備えて、設定した数秒後にイコライズ スクリプトを自動的に実行します。絶対確実というわけではありませんが、実際には、タイマーを正しく調整すれば、このフォールバックで訪問者の 99% を満足させることができます。



数年後、これはまだ賛成票を集めています。最近ではフレックスボックスが広くサポートされているため、JSを使用している特定の理由がない限り、これには単なるCSSを検討することをお勧めします

.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 に答える
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

この方法で関数を記述することもできます。これは、最後にクラス名または 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 に答える
0

この正確な目的のための jQuery プラグインがあります: https://github.com/dubbs/equal-height

すべての列を同じ高さにするには、次を使用します。

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

それらを上位の位置でグループ化したい場合。各コンテナ内:

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

.parent()APIを使用して、個々のコンテナーにアクセスできます。

お気に入り、

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