Setting div height to another div's height

Question

I've made a timeline using a sort of following this: https://www.w3schools.com/howto/howto_css_timeline.asp and set it to position: sticky. This is in a container called, div.timeContainer. Next to it, there's some text in a separate div. The idea is that the user scrolls down, reading the text on the right, while the timeline/overview on the left is in view.

The problem right now is that if I set the height of div.timeContainer, resizing the window means that the timeline will stop being in view/sticky around half-way through since the div on the right has become longer.

This (and variations) is what I have tried so far:

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

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

Try this link: https://stackoverflow.com/questions/19484544/set-height-of-div-to-height-of-another-div-through-css — multi mayhemz, Aug 12 '20 at 22:23

score 1 · Accepted Answer · answered Aug 12 '20 at 23:34

I have prepared for you a simple example of assigning parent height to a child. An example in 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>

Setting div height to another div's height

1 Answers1