0

私は現在ウェブサイトを作成していますが、子のオフセットに応じて div のサイズを調整する必要があります。だから、私はこのようにやっています：

<script type="text/javascript">

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

</script>

しかし、問題はイベントが Firefox によってトリガーされないことです。しかし、クロムでは機能します。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の問題ではなく、最初の問題を解決する別の回避策を見つけました。

4

2 に答える 2

0

問題は、DOMready イベントが発生したときに、すべての幅と高さがブラウザーによってまだ計算されていないことです。DOMready イベントは、css がロードされたときではなく、ページ構造が使用可能になったときに発生します。

CSS を含む、ページのすべてのアセットが読み込まれたときに発生する load イベントで、この種の作業を実行してみてください。

$(window).load(function(){ 
    if($(sizer)[0].scrollHeight > 500) {
        $(maincnt).height( ($(sizer)[0].scrollHeight + 300) );
    }
});
于 2012-04-14T14:59:49.767 に答える
0

この問題は、JS に変数として ID があらかじめ入力されているかのように DOM 要素を扱っていることが原因であることがほぼ確実です。

あなたが現在持っているものの代わりに試してみてください$('#sizer')。$('#maincnt')

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

于 2012-04-14T15:28:08.880 に答える