How to calculate div height using JavaScript?

Question

I have develop some html page. I want to fit side menu when change page div height

<div>  <!-- menu div-->
</div> 
<div>  <!-- content div-->
</div>

When change content div height, want to change same height in menu div. When show hidden field change content div height, I want to adjust menu div height in same height. I looking for answer in jquery or JavaScript.

If you want to work with specific divs you will need to apply ID's to them. You can use pseudo-elements but it's not a good practice for this case. — Phiter, Apr 08 '16 at 13:19
take a look at this [Equal height for two divs](http://stackoverflow.com/questions/35342576/equal-height-for-two-divs/35342898#35342898) — Pedram, Apr 08 '16 at 13:21

score 2 · Accepted Answer · answered Apr 08 '16 at 13:23

2

See about https://api.jquery.com/resize/ and http://api.jquery.com/height/

$('div').height();

or

$('div').resize();

answered Apr 08 '16 at 13:23

Axel Couturier

168
5

Alexey G · Answer 2 · 2017-06-19T08:45:21.947

1

You can use bind/trigger for that:

$('#content-div').bind('heightChange', function(event, newHeight){
  $('#main-div').height(newHeight);
});

and trigger event on div height change:

var newHeight = 200;
$('#content-div').css('height', newHeight);
$("#content-div").trigger('heightChange', newHeight);

edited Jun 19 '17 at 08:45

answered Apr 08 '16 at 13:25

Alexey G

1,068
1
14
18

How to calculate div height using JavaScript?

2 Answers2