jQueryを使用して複数のDIVを同じ高さに保つにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/803688

  •  03-07-2019
  •  | 
  •  

質問

テキストコンテンツの量が異なるDIVタグがいくつかあります。

HTML：

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

2行2列のレイアウトで、幅は流動的です：

CSS：

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

すべて同じ高さにしたい。

だから、それらをループして、最も高いものの高さを見つけます。その後、もう一度ループし、すべてをその高さに設定します。

jQuery：

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

これは、divの高さを再度変更する必要がない場合に有効です。

しかし、ブラウザウィンドウのサイズを変更すると失敗します：

  1. （a）ブラウザを広くする場合、（b）私が DIVは広くなり、次に（c）テキスト コンテンツのラップ回数が少なくなった後、（d） DIVが高すぎます。

  2. （b）ブラウザをより狭くする場合、 次に（b）DIVが狭くなり、次に（c） テキストコンテンツがさらにラップされ、 （d）DIVが短すぎます。

（1）通常のようにDIVをコンテンツの高さに自動的にサイズ変更するだけでなく、（2）これらの複数のDIVを同じ高さに維持するにはどうすればよいですか？

役に立ちましたか？

解決

更新 ...これを実行し、明らかに実行可能な別の方法を試し、見つけた後、この回答を完全に書き換えます：

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

私が気づいたことの1つは、IEが50％幅の浮動divで実際に丸めの問題を抱えていることです。これらを49％に変更すると、レンダリングがはるかに良くなりました。

このjQueryは動作します... 

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
    var currentWidth = $(window).width();
    if (previousWidth != currentWidth) {
        doAdjust = true;
    }
    previousWidth = currentWidth;
})

// every half second

$(function() {
    setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
    if (doAdjust) {
        adjustBoxHeights();
        doAdjust = false;
    }
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        $(this).height('auto');
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
}

他のヒント

私と同じように、Googleで解決策を探してここに来た人たち：受け入れられた答えの最初の部分は、最初のdivが最高のときにのみ機能します。私はそれにいくつかの変更を加えましたが、今ではすべてのケースで動作するようです。

var highest = 0;
function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#wrapper2>div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
    });        
        highest = heights[0]; 
    $('#wrapper2>div').each(function(){
        $(this).css('height', highest);
    });

}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

この jQueryプラグインをチェックすると、高さなどのCSSプロパティ。

サイズ変更などで動作させたい場合は、次のようにします：

function sortNumber(a,b) {
    return a - b;
}

var highest = 0;

function maxHeight() {
    var heights = new Array();
    $('.equalheight div').css('height', 'auto');
    $('.equalheight div').each(function(){
        heights.push($(this).height());
    });        
    heights = heights.sort(sortNumber).reverse();
    highest = heights[0]; 
    $('.equalheight div').css('height', highest);
}

$(document).ready(maxHeight);
$(window).resize(maxHeight);

この解決策は、私の状況に対してもう少し整頓されていることがわかりました。どのdivが最も高いかに関係なく機能します。この古いChris Coyierに基づいて CSS Tricksに投稿 。

function maxHeight() {
    var maxHeight = 0;
    $(".container > .post-box").each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(".container > .post-box").height(maxHeight);
}

$(document).ready(function() {
    maxHeight();
}

$(window).bind('resize', function () {
    $(".container > .post-box").css('height', 'auto');
    maxHeight();
}).trigger('resize');

ただし、関数を再度実行する前に、サイズ変更時に高さを自動に設定する必要がありました。 cssで設定されているため、元の関数で設定する必要はありませんでした。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top