Корректировка элементов на основе scrollHeight с использованием JQuery

Question

Вот что у меня есть:

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

Это функция обратного вызова для JJuery-функции AJAX, в основном, когда она завершается, .ajaxStop() она скрывает загрузчик и показывает содержимое.

У меня проблема с настройкой bodyBackground, sidePanel и bottom, чтобы они соответствовали содержимому. Мне не важно, чтобы он был эластичным и убирался для короткого контента на этом этапе, я просто хотел бы расширить его до правильного позиционирования на основе длины контента.

Все дивы абсолютно позиционированы. Числа в функции разбиты просто для упрощения объяснения. -105 - это offsetTop этого элемента, а +100 - это отступ между концом содержимого и элементами.

если есть лучший, более эффективный способ достижения этого результата, пожалуйста, скажите.

Спасибо.

Answer 1

Исходя из вашего кода, единственное, что вы должны увидеть - это верхние 105px # sidePanel1 Это твое намерение? (h = нижняя часть окна, в соответствии с вашим кодом.)

Придерживаясь шаблонов JQuery, вы бы использовали

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

Может быть, вы ищете это вместо высоты окна браузера? Он получит высоту элемента содержимого.

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