Set div height with javascript from another div height

Question

I have two divs side by side. Neither of them has a standart height, but the first one has content when the other one fill with content after a form submition. I want to set the height of the second one the same with the first one.

Here is the html:

<div id='left'>
...........
</div>
<div id='right'>
...........
</div>

<script type="text/javascript">
    $(document).ready ( function(){

    var divHeight = document.getElementById('left').style.height;
    document.getElementById('right').style.height = divHeight+'px';
    });
</script>

I don't have any error on the console, but the height of the second div doesn't change. Any help?

Yes, because `style.height` will return the inline CSS style and not the computed height of the element. — VisioN, Apr 09 '14 at 15:00

score 13 · Accepted Answer · edited May 23 '17 at 12:00

13

You're looking for the offsetHeight. The height property of your leftmost div is not set (because that's the actual CSS property, and you're not setting the height statically), but the offsetHeight is the actual height of the div as defined by its contents.

var offsetHeight = document.getElementById('left').offsetHeight;
document.getElementById('right').style.height = offsetHeight+'px';

Here's a jsFiddle to demonstrate.

Note that there is also clientHeight. The difference is that offsetHeight also includes padding and borders. See this answer as well.

edited May 23 '17 at 12:00

Community

1
1

answered Apr 09 '14 at 15:02

Joost

4,094
3
27
58

I tried it before, but without a success. Do you know if I have a problem because the `right` div is a well from Twitter-Bootstrap? – Tasos Apr 09 '14 at 15:08
That should not be a problem. In fact, have a look at this updated fiddle that includes `right` as a well - it seems to work fine. http://jsfiddle.net/6gERe/1/ There must have been something else causing harm, then.. – Joost Apr 09 '14 at 15:13
It was a typo. Thank you :) – Tasos Apr 09 '14 at 15:35

Subin · Answer 2 · 2014-04-09T15:14:12.070

I see you're using jQuery. Here's the jQuery version that is equivalent of the native JavaScript code that you used.

$(document).ready ( function(){
 var divHeight = $('#left').height();
 $('#right').height(divHeight);
});

Demo ( JsFiddle).

Since you're using left and right as the elements' Id, I assume they are inline-blocks. So you should set the offset height of the other one than the real height :

$(document).ready ( function(){
 var divHeight = $('#left')[0].offsetHeight;
 $('#right').height(divHeight);
});

Demo (JsFiddle).

score 0 · Answer 3 · answered Apr 09 '14 at 15:01

0

With jQuery

$(document).ready ( function(){
    var leftHeight = $('#left').height();

    $('#right').height(leftHeight);
});

or directly

$(document).ready ( function(){
  $('#right').height( $('#left').height() );
});

answered Apr 09 '14 at 15:01

Luca Detomi

5,564
7
52
77

score 0 · Answer 4 · answered Apr 09 '14 at 15:34

I created a helper function that accepts a jquery object with multiple objects to set the height equal. check it out...https://gist.github.com/rob-bar/10283279 Advantages are that the functionality is isolated so you can make a list of things to check when you have more divs than 2 or divs in divs that you want ....etc...

BUT! be aware of the fact that you can accomplish equal heights with either flexbox or with display: table and cell on the child.

Set div height with javascript from another div height

4 Answers4