Как сохранить одинаковую высоту нескольких DIV с помощью jQuery?
Вопрос
У меня есть несколько тегов 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>
Они расположены в формате два на два, а их ширина меняется:
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 не нужно снова менять.
Но это не удастся, если я изменю размер окна браузера:
Если я (а) сделаю браузер шире, тогда (б) мои DIV становятся шире, то (C) их текстовое содержание заканчивается меньше раз, а затем (D) мои DOV слишком высоки.
Если я (б) сделаю браузер более узким, то (б) мои DOV становятся более узкими, то (C) их текстовое содержание заполняется больше, а затем (D) мои DOV слишком короткие.
Как мне (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);
Я заметил одну вещь: у IE действительно есть проблемы с округлением с плавающими элементами div шириной 50%...рендеринг был бы намного лучше, если бы я изменил его на 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 является самым высоким.Основано на этом старом Крисе Койере. пост в 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.