2012-02-15 4 views
35

私は360pxの設定高さのコンテナ(thetext1)を持っています。 "thetext1"には、左に1つ、右に浮かぶ2つのdivが含まれています。両方のコンテンツはajax呼び出しで配信されます。jQueryの高さ()は、表示されるdivで0を返します - なぜですか?

これらのdivのいずれかのコンテンツが360pxを超えているため、それに応じてthetext1の高さをそれに応じて増やしたい場合があります。

私のテストコード

newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height(); 

戻り0 - (目標のdivは完全にピンクであるとして、私のセレクタは正しいです!)。

これはなぜですか?私は知っている - このサイトの前の投稿への回答から - 解決策はオーバーフロー:hidden thetext1を追加することだが、rhsとlhs divの高さを取得しようとする試みが失敗した理由を理解したい。

+1

を必要とするかもしれないしなければならないことがありオーバーフローを設定することでそれらを含む必要があります:境界ボックスに隠されているか、次の要素の浮動小数点数をクリアします – Alex

+1

含まれている要素は両方とも浮動していますか?実際にその子を含むように、おそらくコンテナ上のフローティングをクリアする必要があります。 –

+1

コンテンツはajaxコールで配信されます。あなたはajaxコールの後に身長を読んでいますか? –

答えて

28

コードは$(ウィンドウ)内にあることを確認してくださいは、[いない$(ドキュメント).ready]

$(window).load(function() { 
    newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height(); 
}); 
+0

このような場合にdocument.readyの代わりにwindow.loadを使用する理由について詳しく説明できますか?ありがとう! –

+1

正直言って、私は100%確実ではありません。それだけでうまくいった。私の推測では、document.readyはそれだけです。ドキュメントの要素はダウンロードされ、DOMは「準備完了」ですが、window.loadはウィンドウがロードされ、寸法が計算されたことを意味します。 – Gazzer

+1

@Gazzer。OperaとChromeのようなWebkitブラウザでは、高さが0になりました。 $(window).load(function(){})を使う。私のために働いた。ありがとう – Muk

7

要素が最初に読み込まれているかどうかを確認する限り、$(document).readyを使用することはできます。 http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

そして、最初の応答で答えを使用することにしました:私はもともとここに解決策を見つけた

$("_element name/id_").load(function() { 
     $(this).height(); 
}); 

で行くことにしました。

7

私は同じ問題を抱えていました.1つのことに気がつきましたが、divを.height()を呼び出すときに表示する必要があります。

ただし、divが表示されていても、このdivの親が表示される必要があります。 $('#div').parent().show();を書く親のdivが表示されていることをgarantee(表示!=なし)

は、親が目に見えるようになります要素が浮いているのであればあなたは、あなたがanothers parent().show();

+0

私はこれが問題かもしれないと思った。しかし、私の場合、2つの画像が入ったバウンディングボックスがあります。 1つは小さく、箱の中では、その高さになります。しかし、もう一方は境界を越えて行きます(オーバーフローが隠された境界)。 0高さが返されます。バウンディングボックスは、詳細をフェッチしている間は表示なしです。だから、これがそれであると信じることは難しくなります。その後、すべての高さが適切に把握され、他の機能が実行されます。 –

0
newhgt = $('#thetext1').find('div.rhs').css("background", "pink")[0].getBoundingClientRect().height; 
関連する問題