javascript - 使用 JQuery 调整基于 scrollHeight 的元素

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

这是 JQuery ajax 函数的回调函数，基本上是在所有 ajax 完成时执行的操作 .ajaxStop() 它隐藏加载器然后显示内容。

我遇到的问题是调整 bodyBackground、sidePanel 和 bottom 以适应内容。在这一点上，我不关心它是否具有弹性和缩回短内容，我只是希望它能够根据内容长度扩展到适当的位置。

所有的 div 都是绝对定位的。函数中的数字被简单地分解，以便于解释。 -105 是该元素的 offsetTop，+100 是内容结尾和元素之间的边距。

如果有更好、更有效的方法来实现这一结果，请告诉。

谢谢。

Answer 1

根据您的代码，您唯一应该看到的是#sidePanel1 的前 105 像素。那是你的意图吗？ (h = 窗口底部，根据您的代码。)

坚持使用 JQuery 模式，您将使用

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

也许您正在寻找这个而不是浏览器窗口的高度？它将获取内容元素的高度。

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