获取绝对定位的身高未知的孩子，以在调整窗口大小时调整父项的大小

Question

https://codepen.io/umbriel/pen/MxazRE

我有一个幻灯片显示，用户可以通过在幻灯片容器上水平滑动鼠标光标来更改要查看的幻灯片。

由于子级（幻灯片）的位置绝对正确，因此我需要动态更新父级（幻灯片容器）的高度。否则

因为我不知道单个幻灯片的高度，所以我需要计算最高的div并将其分配给父级

下面的代码可在下面获得最高的元素：

    function getTallestSegment(element) {
      let elementsHeight = [];
      let height = 0;
      element.forEach(child => {
        elementsHeight.push(child.scrollHeight);
      });
      height = Math.max(...elementsHeight);
      return height;
    } 

然后窗口会调整大小片段以动态更新父级高度。

    window.onresize = function(e){
      Object.assign(item.style, {
        height: getTallestSegment(getChildren) + "px"
      });
    };

现在它可以工作，但仅在缩小窗口尺寸时才有效： 请看看gif。请注意，右下角的高度值实际上正在改变。但只有当我缩小窗口尺寸时，我还希望它在扩大窗口宽度时也能正常工作！

有没有人考虑让父母在两个方向上调整大小？

谢谢！

Answer 1

代码的问题是，当您扩展视口时，元素是其容器的100％高度。展开时，元素仍然是容器的100％高度，因为容器具有固定的高度，这就是说它不会收缩。

但是使用CSS网格，您可以重叠元素，并且仍然根据容器中的最高元素调整容器的大小，不需要绝对位置，也不需要JavaScript来调整它们的大小。

首先，将容器设为网格：

.hover-slide {
  display:grid;
}

然后，将所有元素放在同一行和同一列上（不需要绝对，左，右，宽度，高度等）：

.hover-slide > * {     
  grid-column: 1;
  grid-row: 1;
}

就是这样，您可以更改活动元素，但是高度将是最小的，以便将所有元素放入内部。

您的代码，但使用了这个想法https://codepen.io/anon/pen/PLPLpv（我添加了一个边框以方便查看容器的高度）