Set height of div using JS to match the bottom position of another div

Question

I need to set the height of Div X to match bottom of Div N . Constraint: These containers are not nested and they can't be nested so a HTML/CSS solution will not be applicable. Div X height must be set using JS.

An approach which works is to sum the height of all Div 1 thru Div N items and then set the height of Div X .

--

Question:

I'm searching for an alternative solution. Maybe a browser API like getBoundingClientRect could work but I'm unsure of how to implement.

Or any other browser API's?

Answer 1

How about this?

let height = 0
let node = document.querySelector('DIV_N')
while(true) {​​​​
    height += node.getBoundingClientRect().height
    if (node.classList.contains('DIV_1')) break
    node = node.previousSibling
}​​​​
document.querySelector('.DIV_X').style.height = height + 'px'