Узнайте высоту divs и настройку высоты div

Question

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

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

Answer 1

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

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

Спасибо, Слакс!

Answer 2

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

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

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

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

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

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

Answer 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();
});

Answer 5

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

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

Answer 6

Я думаю, вы ищете этот плагин: equizeBottoms от Ben Alman

Answer 7

Конечно, если все, что вам нужно, это исправить проблему равной высоты, то вам нужен One True Layout:

http://fu2k.org/alex/css/onetruelayout/example/interactive

Answer 8

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

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

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

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

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

Хитрость в том, чтобы создать ультраширокое фоновое изображение (или два изображения для 3-колоночных макетов, таким образом, техника «скользящих дверей»). Изображение частично непрозрачное, а частично прозрачное. Он помещается вертикально в родительский контейнер, точно так же, как техника Дэна «Искусственные столбцы». Непрозрачная часть изображения должна соответствовать процентам столбца, который он помогает создать, чтобы его можно было расположить с идентичным значением background-position. Это позволяет перейти от непрозрачного к прозрачному, чтобы стать точкой оси для положения фона. Положение непрозрачной части в изображении может быть изменено в зависимости от порядка содержимого в HTML, чтобы получить практически любой желаемый эффект.

Answer 9

Ну, вы можете получить и установить высоту с помощью 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);