Nach einer div Größe zu seinem Inhalt

Question

Ich bin gerade dabei, eine Website zu erstellen, und ich muss die Größe eines div entsprechend dem Offset auf einem Kind anpassen. Also, ich bin es auf diese Weise tun:

<script type="text/javascript"> 

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

</script> 

Aber das Problem ist, dass Ereignis nicht von Firefox trigged wird. Aber mit Chrom funktioniert es. Gibt es eine sauberere Möglichkeit, die div-Größe zu akzeptieren? Wenn nicht, gibt es eine Möglichkeit, es durch Firefox auszulösen? Hier ist mein HTML-Code ist:

<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> 

Edit: Ich gab, habe ich eine andere Abhilfe gefunden, die mein erstes Problem zu lösen, nicht die JQuery.

Answer 1

Das Problem könnte sein, dass wenn das DOMready-Ereignis ausgelöst wird, alle Breiten und Höhen vom Browser noch nicht berechnet wurden. Das DOMready-Ereignis wird ausgelöst, wenn die Seitenstruktur bereit ist zu arbeiten, nicht wenn das CSS geladen wurde.

Versuchen Sie, diese Art von Arbeit auf dem Ladeereignis zu tun, die ausgelöst wird, wenn alle Vermögenswerte einer Seite geladen wird, CSS enthalten:

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

Answer 2

Das Problem mit ziemlicher Sicherheit durch die Tatsache, dass Sie verursacht wird‘ Behandeln von DOM-Elementen so, als ob JS bereits mit IDs als Variablen gefüllt ist.

Versuchen Sie $('#sizer') und $('#maincnt') anstelle von denen, die Sie derzeit haben.

Warum verwenden Sie überhaupt ein absolut positioniertes Element? Was ist falsch daran, es einfach eingestellt zu haben mit: margin: 12px 0px 0px 10px; width: 750px;?