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
– VisioN, Commented Apr 9, 2014 at 15:00

Community · Accepted Answer · 2017-05-23 12:00:35Z

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, 2017 at 12:00

CommunityBot

11 silver badge

answered Apr 9, 2014 at 15:02

Joost

4,1443 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tasos Over a year ago

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?

Joost Over a year ago

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. jsfiddle.net/6gERe/1 There must have been something else causing harm, then..

Tasos Over a year ago

It was a typo. Thank you :)

Luca Detomi · Accepted Answer · 2014-04-09 15:01:44Z

0

With jQuery

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

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

or directly

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

answered Apr 9, 2014 at 15:01

Luca Detomi

5,7668 gold badges58 silver badges81 bronze badges

Comments

Subin · Accepted Answer · 2014-04-09 15:14:12Z

0

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).

edited Apr 9, 2014 at 15:14

answered Apr 9, 2014 at 15:01

Subin

3,5731 gold badge36 silver badges65 bronze badges

Comments

Robbie Bardijn · Accepted Answer · 2014-04-09 15:34:14Z

0

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.

answered Apr 9, 2014 at 15:34

Robbie Bardijn

4872 silver badges6 bronze badges

Collectives™ on Stack Overflow

Set div height with javascript from another div height

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related