将 div 高度设置为另一个 div 的高度

Question

我使用以下方式制作了一个时间线：https://www.w3schools.com/howto/howto_css_timeline.asp 并将其设置为位置：粘性。这是在一个名为 div.timeContainer 的容器中。在它旁边，有一个单独的 div 中的一些文本。这个想法是用户向下滚动，阅读右侧的文本，而左侧的时间线/概述在视图中。

现在的问题是，如果我设置了 div.timeContainer 的高度，调整窗口大小意味着时间线将在中途停止显示/粘滞，因为右侧的 div 变长了。

这是我迄今为止尝试过的（和变体）：

const historyContainer = document.querySelector("div.history").style.height

document.querySelector("div.timeContainer").style.height = historyContainer

Answer 1

我为您准备了一个简单的例子，将父母身高分配给孩子。 vanilla js中的一个例子。

let parent_div = document.querySelector('.parent');
let child_div = document.querySelector('.child');
let click_button = document.querySelector('input');

click_button.onclick = function(){
  child_div.style.height = parent_div.offsetHeight + 'px';
};

.parent {
  width: 100%;
  height: 300px;
  background-color: yellow;
}

.child {
  width: 50%;
  background-color: green;
}

<input type="button" value="click me to get the height of the child div">
<div class="parent">
 <div class="child">
 </div>
</div>