Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   .height() почему-то считает высоту элемента неправильно (https://javascript.ru/forum/jquery/30235-height-pochemu-schitaet-vysotu-ehlementa-nepravilno.html)

adelante 28.07.2012 17:34

.height() почему-то считает высоту элемента неправильно
 
На странице есть несколько контейнеров div.secondary_banner_box, внутри которых типовые элемнты: div.title, div.subtitle и div.text (ну и прочее, что нам неинтересно). Нужно, чтобы независимо от количества контента в любом из элементов div..secondary_banner_box все они начинались (и, следовательно, заканчивались) горизонтально на одном уровне соответственно класса элемента. Заумно как-то получилось...

В общем, чтобы все элементы одного класса были одинаковы по высоте. Есть функция, которая это делает (получает в данном примере ".secondary_banner_box", как первый параметр, а как второй -- один из классов внутренних элементов:

function alterHeights( container, element ) {
		
			var boxes = jQuery(container).length; //считаем сколько всего родительских контейнеров
			
			var heights = [];
			
			for ( var i = 0; i < boxes; i++ ){
			
				heights[i] = jQuery( '#box_' + (i+1) + ' ' + element ).height(); //определяем высоты всех элементов
			
			}
			
			var max = 0;
			
			for ( i = 0; i < boxes; i++) {
			
				if ( heights[i] > max ) max = heights[i]; //определеяем максимальную высоту среди всех элементов
			
			}
			
			for ( i = 0; i < boxes; i++ ) {
			
				jQuery( '#box_' + (i+1) + ' ' + element ).height(max); // выставялем эту максимальную высоту для всех элементов
			
			}
		
		}


Вроде всё ОК и часто отрабатывает эта конструкция как надо. Но часто и не нормально. Ненормальность заключается, в том, что "jQuery( '#box_' + (i+1) + ' ' + element ).height()" возвращает значение, большее, чем там реально должно быть.

Например, на этой странице, если функция не выполняется, то высота самого высокого элемента среди .title ( а именно #box_6 .title ) равняется 69px. Если же функция выполняется, максимальная высота становится 96px.

Скриншот без выполнения функции:



Скриншот с выполнением функции:



В чём причина такого странного поведения -- мне непонятно, поэтому прошу помощи.

Deff 28.07.2012 21:27

adelante,
padding добавляет высоту ширину элемента
попробуйте прописать padding:0!important;

adelante 29.07.2012 16:09

Увы, не помогло :(

adelante 29.07.2012 16:13

Совершенно не понятно, в чём причина такого поведения. Сейчас я прошёл по всем 6 контейнерам и в одном из элементом каждого контейнера (.subtitle) повыключал выставленный "height:72px;", -- ни в одном из этих элементов нет такой высоты 0_о

Deff 29.07.2012 17:23

adelante,
Лучше чтоб не гадать - ссылку на тестовую страницу и скриншот - с обведенной рамкой и селектором -высоту чего глянуть

adelante 29.07.2012 19:45

На скриншотах прикреплённых выбран для анализа элемент "#box_6 .title".

Это заголовок правого тура во втором ряду. На скриншотах серым выделено слово "исследуем" (1й скриншот) и буква "и" (2й скриншот).

Deff 29.07.2012 20:35

adelante,
:dance: Онлайн - Лечение зубов по фотографии - с гарантией - дорого!

adelante 31.07.2012 20:08

http://questtravel.ru/?s=африка


Deff 31.07.2012 20:17

adelante,
В Опере - так =>
Мозилла и Хром



imsha 01.08.2012 09:16

Попробуй так:

//Скрипт отработатет после загрузки картинок
$('.secondary_banner_box img').load(function(){
    var height = 0;
    $('.secondary_banner_box').each(function(){
        var h = $(this).height();
        if (h > height) {
            height = h;
        }
    });
    $('.secondary_banner_box').height(height);
    //Или так
    //$('.secondary_banner_box').css('min-height', height);
});


Часовой пояс GMT +3, время: 17:02.