Найдите высоту divs и установите высоту div

Я новичок в javascript/jquery, но я хотел бы сделать с ним что-то вроде этого:

У меня есть четыре divs бок о бок, подобные этому, и контент в каждом из них. Теперь, если у вас больше контента, он растягивается выше. Я хотел бы сделать другие divs слишком высокими, даже если у них не так много контента. Поэтому в основном я хочу, чтобы script проходил через div и проверял высоты и устанавливал все высоты divs так же, как и самый высокий div. Надеюсь, вы понимаете:)

ОТВЕТЫ

Ответ 1

Я получил ошибку NaN с кодом SLaks. Давая maxHeight начальное значение 0, сделал трюк.

var maxHeight = 0;
$('div')
  .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
  .height(maxHeight);

Спасибо SLaks!

Ответ 2

Вы можете использовать jQuery height метод, чтобы получить и установить высоту элемента.

Вам нужно прокрутить элементы, найти самый высокий, а затем установить высоту всех элементов.

var maxHeight;
$('div')
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
    .height(maxHeigt);

Замените 'div' селектор jQuery, который выбирает элементы, которые вы хотите выровнять.

Ответ 3

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

см. этот пример

Ответ 4

Это прямо из страниц документации jQuery:

$.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
  $('div').equalizeHeights();
});

Ответ 5

Я считаю, что вы ищете этот плагин: equalizeBottoms от Ben Alman

Ответ 6

Это простой код

var heights = $("element").map(function ()
{
    return $(this).height();
}).get(),

MaxHeight = Math.max.apply(null, heights);

или

var highest = null;
var hi = 0;
$(".testdiv").each(function(){
var h = $(this).height();
if(h > hi){
   hi = h;
 highest = $(this);  
 }    
});

highest.css("background-color", "red");

Ответ 7

Ну, вы можете получить и установить высоту с помощью height()

height = $('#id').height()

Прокрутите элементы и проверьте высоту, например:

$elements = $('.container');

var max_height = 0;

for ($element in $elements) {
    if (max_height > $element.height()) max_height = $element.height();
}

$elements.height(max_height);

Ответ 8

Wow - люди действительно хотят заставить jQuery обмануть это - вы можете сделать все это с помощью CSS. Из stopdesign:

При создании жидкостных макетов с использованием CSS, вот несколько соображений, которые я помню:

  • Столбцы Double-div: насколько я ненавижу использовать дополнительную разметку, нет более простого способа обеспечить максимальную совместимость между несколькими браузерами, чем использовать два div для каждого столбца. Внешние разделители используются для установки ширины. Внутренние разделители используются для установки прокладки для создания желобов белого пространства между каждым столбцом.

  • Используйте лотки с фиксированной шириной (или ширины желобов на основе размера шрифта): когда ширина столбца применяется независимо от заполнения столбцов, как указано выше, проценты могут использоваться для ширины, а пиксели или ems могут использоваться для заполнения, Это, не беспокоясь о том, что один столбец попадает в нижнюю часть другой или без преднамеренно подстрочных столбцов, поэтому они всегда подходят на странице. Несмотря на то, что ширина столбцов изменяется по мере того, как браузер становится более широким или узким, текст на странице обычно остается того же размера. Количество пробелов, необходимое для удобства чтения текста, зависит больше от размера типа, а не от размера столбца, содержащего этот текст.

  • Избегайте столбцов фиксированной ширины: насколько это возможно, сделайте все столбцы в процентах. Это заставляет задуматься о боковых панелях и столбцах навигации как о одной статической ширине, и пусть основной или средний столбец сделает все расширяющееся. Это быстро уничтожает любые пропорции, которые, возможно, были тщательно выбраны, поскольку столбцы с фиксированной шириной могут выглядеть слабыми и слабыми при больших разрешениях. Или широкие боковые панели с фиксированной шириной могут стать сложными, перегружая главный столбец при более узкой ширине браузера.

Фокус в том, чтобы создать сверхширокое фоновое изображение (или два изображения для трехколоночных макетов, таким образом, способ раздвижных дверей). Изображение частично непрозрачное и частично прозрачное. Он становится черепицей вертикально внутри родительского контейнера, точно так же, как техника Dan Faux Columns. Непрозрачная часть изображения должна соответствовать процентам столбца, который он создает, чтобы он мог быть расположен с одинаковым значением фоновой позиции. Это позволяет перейти от непрозрачного к прозрачному, чтобы стать точкой оси для положения фона. Непрозрачная часть позиции внутри изображения может быть изменена в соответствии с порядком содержимого в HTML для получения почти любого желаемого эффекта.