JQuery CSSの高さの設定がChrome/Safariで機能しない

Question

Googleのサイトで表形式で表示されるアイテムのリストがあります。リストに表示されるアイテムの数に応じて、テーブルの高さが変更されます（アイテムの数は曜日によって変わります）。このリストテーブルの左側には、すべてのテーブルが毎日どのようになっているかに応じて適切な高さにリサイズする必要がある垂直バーがあります。

これは、我々が使用している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> 

をだから、基本的に、我々は.tv_guide_contentsのCSSの高さが何であるかをチェックするためにjQueryを使用して、その後.shows_bar_titleの高さを設定し、その値を使用しています。

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

問題は、ChromeではplaylistHeightの値が実際の値よりも高いことです。たとえば、tv_guide_contentsの高さが1932pxの場合、playlistHeightの値は2012pxと表示され、タイトルバーが高くなります。しかし、Chromeのコンソールに移動して

を入力した場合、

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

私は1932pxを取得します。また、ボックスモデルビューで1932が表示されます。

なぜplaylistHeight変数を設定すると高い値になりますか？これはFirefoxでは起こりませんが、タイトルバーのサイズが正しく変更されています。

ありがとうございました。

Answer 1

多分、あなたはすべてのページコンテンツを読み込んだ後にスクリプトを実行するかもしれません。これを行うには、​​関数を使用します。