jQueryを使用して複数のDIVを同じ高さに保つにはどうすればよいですか?
質問
テキストコンテンツの量が異なる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の高さを再度変更する必要がない場合に有効です。
しかし、ブラウザウィンドウのサイズを変更すると失敗します:
-
(a)ブラウザを広くする場合、(b)私が DIVは広くなり、次に(c)テキスト コンテンツのラップ回数が少なくなった後、(d) DIVが高すぎます。
-
(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で設定されているため、元の関数で設定する必要はありませんでした。