Блог

Главная - Вопросы по программированию - Высота не устанавливается на фактическую высоту div

Высота не устанавливается на фактическую высоту div

#jquery

#jquery

Вопрос:

У меня есть DIV, который открывается на высоту содержимого, но по какой-то причине в divs, у которых нет содержимого, высота вычисляется неправильно.

Вторая запись в блоге вниз (Thoma) является хорошим примером при расширении.

http://dririser.co.uk/index.php

«Высота данных» равна 108 пикселям, но высота DIV устанавливается равной 360 пикселям. DIVs с содержимым в работают нормально, он устанавливает правильную высоту, но, похоже, приводит к неправильному вычислению в DIVS без содержимого.

В этом, по сути, суть кода.

Установите высоту в качестве значения в div.

 $(".articleSlide").each(function () {
    var current = $(this);
    current.attr("data-height", current.height());
});

Установите переменную, затем примените высоту.

 $(".showTeamList").toggle(function() {
    var open_height = $(".articleSlide").attr("data-height")   "px";
    $(this).parent().parent().animate({"height": open_height}, "slow" );
 }, function() {
    $(this).parent().parent().animate({"height": "35"}, "slow" );
});

Комментарии:

1. Пожалуйста, прекратите писать теги в заголовках. Вы сделали это практически по всем вашим 25 вопросам. 🙁

2. В Stack Overflow есть функция тегов, позволяющая последовательно отображать и индексировать разделы. Теги в стиле доски объявлений в заголовках, благодаря этой функции, устарели … и избыточны! Таким образом, они не поощряются.

Ответ №1:

Ваша проблема в том, что эта строка:

 $(".articleSlide").attr("data-height")

Будет только когда-либо находить первый элемент с классом, .articleSlide затем использовать data-height его. Вы хотите, чтобы он нашел data-height элемента, который является специфичным для этой кнопки., точно так же, как вы сделали с: 

  $(this).parent().parent().animate({"height": open_height}, "slow" );

Попробуйте: 

 $(this).parents(".articleSlide").attr("data-height");

Ответ №2:

height() «Получает текущую вычисленную высоту для первого элемента в наборе сопоставленных элементов».

он имеет правильное поведение, потому что вычисленная высота равна none. вам нужно поместить элементы в абсолютно позиционированный контейнер с overflow:hidden;height:0;