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

Question

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

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

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

13

javascript jquery css class

Источник

user273851 22 фев '10 в 18:27

9 ответов

Другие вопросы по тегам javascript jquery css class

user260152 05 июл '10 в 21:01 2010-07-05 21:01 · Answer 1 · 2010-07-05 21:01

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

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

Спасибо SLaks!

16

Источник

user260152 05 июл '10 в 21:01

user34397 22 фев '10 в 18:30 2010-02-22 18:30 · Answer 2 · 2010-02-22 18:30

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

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

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

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

user576348 19 авг '11 в 14:14 2011-08-19 14:14 · Answer 3 · 2011-08-19 14:14

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

увидеть этот пример

9

Источник

user576348 19 авг '11 в 14:14

user440805 11 сен '10 в 09:23 2010-09-11 09:23 · Answer 4 · 2010-09-11 09:23

Это прямо из страниц документации 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();
});

3

Источник

user440805 11 сен '10 в 09:23

user2558005 05 апр '14 в 21:03 2014-04-05 21:03 · Answer 5 · 2014-04-05 21:03

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

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

1

Источник

user2558005 05 апр '14 в 21:03

user192264 22 фев '10 в 18:29 2010-02-22 18:29 · Answer 6 · 2010-02-22 18:29

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

1

Источник

user192264 22 фев '10 в 18:29

user57068 22 фев '10 в 18:53 2010-02-22 18:53 · Answer 7 · 2010-02-22 18:53

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

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

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

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

user218196 22 фев '10 в 18:34 2010-02-22 18:34 · Answer 8 · 2010-02-22 18:34

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

0

Источник

user218196 22 фев '10 в 18:34