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。请注意，右下角的高度值实际上正在改变。但是只有当我缩小窗口尺寸时，我才希望它在扩大窗口宽度时也能正常工作！
是否有任何购买者想使父母双方都可以调整大小？
谢谢！
最佳答案
代码的问题在于，当您扩大视口时，元素将是其容器的100％高度。展开时，元素仍然是容器的100％高度，因为容器具有固定的高度，也就是说它不会收缩。
但是，使用CSS网格，您可以重叠元素，并且仍然根据容器中的最高元素来调整容器的大小，无需绝对位置，也不需要JavaScript来调整它们的大小。
首先，将容器设为网格：
.hover-slide {
display:grid;
}
然后，将所有元素放在同一行和同一列上（不需要绝对，左，右，宽度，高度等）：
.hover-slide > * {
grid-column: 1;
grid-row: 1;
}
就是这样，您可以更改活动元素，但是高度将是最小的才能将所有元素放入内部。
您的代码，但使用https://codepen.io/anon/pen/PLPLpv这个主意（我添加了一个边框，以轻松查看容器的高度）
关于javascript - 获取绝对定位的未知高度子项以在窗口调整大小时调整父项的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54931188/