使用 JQuery 基于 scrollHeight 调整元素答案

【问题标题】：Adjusting elements based on scrollHeight using JQuery使用 JQuery 基于 scrollHeight 调整元素
【发布时间】：2023-04-05 00:53:02
【问题描述】：

这是我目前所拥有的：

    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 和底部以适应内容。在这一点上，我不在乎让它有弹性并缩回短内容，我只是希望它根据内容长度扩展到适当的位置。

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

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

谢谢。

【问题讨论】：

您能更清楚地告诉我们您希望它是什么样子吗？
我希望 sidePanel1 和 bodyBackground 在加载的内容（100 像素）下方拉伸，底部在内容下方 100 像素。

标签： javascript jquery

【解决方案1】：

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

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

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

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

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

【讨论】：

我会看看改变它是否有任何作用。我的意图是拉伸页面（简单来说），我理解的是 scrollHeight 得到了从页面顶部到页面底部的总距离（不仅仅是可见窗口）。我试图获取文档的长度并将这些 div 移动到该长度以下 100px...理论上。
同样的结果。它移动 div，数学检查（加法）。问题出在 h 变量上。
杰里米，我添加到这个答案中的新信息对你有帮助吗？
是的，谢谢你，很抱歉耽搁了 - 工作就像一个魅力。