JQuery Настройка CSS CSS не работает на Chrome/Safari

Question

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

Это HTML мы используем:

<div class="tv_guide"> 
     <div class="shows_bar_title"></div> 
     <div class="tv_guide_contents"> 
      <!--The contents are generated dynamically with a PHP loop--> 
      <div class="guide_slot"> 
       <!-- one guide_slot per item --> 
      </div> 
     </div> 
     <div class="clearFloat"></div> 
</div> 

Поэтому в основном мы используем JQuery, чтобы проверить, что высота CSS в .tv_guide_contents это, а затем использовать это значение, чтобы установить высоту .shows_bar_title.

var playlistHeight = $('.tv_guide_contents').css('height'); 
$('.shows_bar_title').css('height', playlistHeight); 

Проблема в том, что в Chrome плейлистHeight имеет значение, которое выше, чем на самом деле. Например, если высота tv_guide_contents равна 1932px, значение playlistHeight отображается как 2012px, и, следовательно, строка заголовка выше. Однако, если я иду на консоль Chrome и введите

$('.tv_guide_contents').css('height'); 

Я получаю 1932px. Он также показывает 1932 в представлении модели коробки.

Почему я получаю более высокое значение, когда устанавливаю переменную playlistHeight? Этого не происходит в Firefox, строка заголовка там правильно изменяется.

Благодарим за помощь.

Answer 1

Возможно, вы выполнили сценарий после загрузки всего содержимого страницы. Используйте функцию .load() для этого:

$(window).load(function() { 
    var playlistHeight = $('.tv_guide_contents').css('height'); 
    $('.shows_bar_title').css('height', playlistHeight); 
});