容器高度设置为容器中最后一个子元素的 css 顶部 + 几个 px答案

【问题标题】：container height set to css top of last child in container + a few px容器高度设置为容器中最后一个子元素的 css 顶部 + 几个 px
【发布时间】：2023-03-14 21:09:01
【问题描述】：

我正在尝试通过同位素、无限滚动和 Packery 的组合将容器的高度设置为容器高度内的最后一个子项。这就是我在他的代码中基本上拥有的内容。

   <html>
    <div id="container" class="variable-sizes isotope" style="position: relative; overflow: hidden;">
       <div class="isoItem isotope-item" style="position: absolute; height: 0px; left: 0px; top: 0px;"> </div>
       <div class="isoItem" style="position: absolute; left: 0px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 340px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 680px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 1020px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 1190px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 1360px; top: 2089px;"></div>
    </div>
   </html>

这就是我想要实现的目标：

$('#container').css('height', $('.isoItem:last').css('top') + '317px');

在这种情况下，#container 高度将设置为 2089px + 317px = 2415px 任何帮助将不胜感激。

【问题讨论】：

标签： jquery html css containers

【解决方案1】：

试试这个：

$('#container').height( (parseInt( $('.isoItem:last').css('top'), 10) + 317) );

为什么？

$('.isoItem:last').css('top') 返回一个带有单位的值，例如 px，因此您无法对其进行直接数学运算。首先通过 parseInt() 将其转换为整数，然后添加您的 317（使用 .height() 时无需附加 + 'px'，因为 jQuery 会自动执行此操作）。

【讨论】：