Question

I have 3 divs:

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>

• Div “one” contains some content so its height is 300px for example.
• Div “two” contains more or less content so its height is 400px for example.
• Both content is changing, it’s not static so I cannot calculate
  heights manually.
• Style of div “two” will also contain “overflow-y: scroll;”

How to create div “two” to be same height as div “one” which can be smaller or bigger?

Here is a quick sketch:

Answer 1

Using Javascript, you could do something like:

document.getElementById("two").style.height = document.getElementById("one").clientHeight;