title: Adjusting elements based on scrollHeight using JQuery
body: <p>Here's what i have so far:</p>
  
  <pre><code>    function loadOff(){
       $(document).ready(function(){
          $("#eLoader").ajaxStop(function(){
               $(this).hide();
               $("#eventsContent").show();
               var h = document.body.scrollHeight;
               $("#bodyBackground").css("height",h+100+"px");
               $("#sidePanel1").css("height",h-105+100+"px");
               $("#bottom").css("top",h+100+"px");
           });
        });
     }
  </code></pre>
  
  <p>This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished <code>.ajaxStop()</code> it hides the loader then shows the content.</p>
  
  <p>The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.</p>
  
  <p>All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.</p>
  
  <p>if there is a better, more efficient way to achieve this outcome, please, do tell.</p>
  
  <p>Thanks.</p>