Adjusting elements based on scrollHeight using JQuery

Question

Here's what i have so far:

    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");
      });
      });
   }

This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.

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.

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.

if there is a better, more efficient way to achieve this outcome, please, do tell.

Thanks.

Answer 1

Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)

Sticking with the JQuery patterns, you would use

var h = $(window).height();

Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.

$("#eventsContent").outerHeight();