は、divのサイズによりその内容

Question

に私はcurrentrlyウェブサイトを作成しています、と私はそれの1チャイルズにオフセットに従ってdiv要素のサイズを適応させる必要があります。問題は無いのFirefoxでtriggedされたイベントで、

<script type="text/javascript"> 

     $(document).ready(function(){ 
     if($(sizer)[0].scrollHeight > 500) 
     { 
      $(maincnt).height(($(sizer)[0].scrollHeight + 300)); 
     } 
     }); 

</script> 

をしかし： だから、私はそれをこのようにやっています。しかし、クロムでそれは動作します。 divのサイズに合わせてよりクリーンな方法がありますか？もしそうでなければ、それはFirefoxによってそれをトリガーにする方法はありますか？ここに私のHTMLコードは次のとおりです。

<div id="maincnt" > 
<div style="position:relative;"> 
<div id="sizer" style="position:absolute;top:12px;left:10px;width:750px;"> 
    <!-- Dynamically added things --> 
</div> 
</div> 
</div> 

編集：私は私が私の最初の問題を解決する別の回避策ではなく、jQueryのの1を見つけた、あきらめました。

Answer 1

DOMreadyイベントが発生すると、すべての幅と高さがブラウザによってまだ計算されていないことが問題です。 DOMreadyイベントは、ページ構造が動作する準備ができたときに起動され、CSSがロードされていないときに開始されます。

$(window).load(function(){ 
    if($(sizer)[0].scrollHeight > 500) { 
     $(maincnt).height(($(sizer)[0].scrollHeight + 300)); 
    } 
}); 

Answer 2

問題はほぼ確実にそのあなた」に起因する：

は、ページのすべての資産がロードされた火災は、CSSが含まロードイベント、上のこの種の仕事を行うようにしてくださいJSに変数としてIDがあらかじめ設定されているかのようにDOM要素を扱います。

現在お持ちのものの代わりに$('#sizer')と$('#maincnt')をお試しください。

また、なぜあなたはとにかく絶対位置の要素を使用していますか？それを設定するだけで何が問題なのですか：margin: 12px 0px 0px 10px; width: 750px;？