jQuery set height of a div to the 'dynamic height' of another

Question

I have two divs.

  <div class="col-1"><p>Content</p></div>
  <div class="col-2"><img src="" alt="" /></div>

With their respected content inside each one.

I am trying to set the height of col-2 to be exactly as that of col-1.

I tried this using jQuery:

   $(document).ready(function() {
        var divHeight = $('.col1').height(); 
        $('.col2').css('min-height', divHeight+'px');
    });

The problem is that col-1 does not have a height set on it. It has a dynamic height which grows when its content grows. Therefore the above code does not work for it.

Is there any way I can set the min height of col-2 to be equal to the dynamic height of col 1 using jQuery?

Because the elements classes in your HTML is different than in JS. Check working [Demo](http://jsfiddle.net/tusharj/2hyyL0vt/) — Tushar, Aug 20 '15 at 04:59
@Tushar thats nice, but he specified _"The problem is that col-1 does not have a height set on it"_ I have provided a demo with his requirements in my answer here http://stackoverflow.com/a/32109749/4323504 — Luthando Ntsekwa, Aug 20 '15 at 05:05
@LuthandoLoot Right. Here's another [Demo](http://jsfiddle.net/tusharj/2hyyL0vt/1/) — Tushar, Aug 20 '15 at 05:08
@AlexZahir You should ask another separate question for this — Tushar, Aug 20 '15 at 05:17

Luthando Ntsekwa · Accepted Answer · 2017-12-18T10:46:26.190

13

this works fine for me, its just that your class names are wrong, the class-names should be .col-1 and .col-2:

$(document).ready(function() {
    var divHeight = $('.col-1').height(); 
    $('.col-2').css('min-height', divHeight+'px');
});

Here is the Fiddle

EDIT- Based on comments:
You can do all this without using jquery

Flexbox (not supported in IE 8 & 9) - if you apply the flex to the parent div, it will make all its children heights equal:
```
 .row{ display: flex;}  
```

table - you can give your div's the table layout

.row {display: table; }

.row div { display: table-cell;}

edited Dec 18 '17 at 10:46

answered Aug 20 '15 at 04:50

Luthando Ntsekwa

4,192
6
23
52

can you do a fiddle? Note that we are not specifying a height on .col 1 – Alex Zahir Aug 20 '15 at 04:54
@AlexZahir i added the fiddle – Luthando Ntsekwa Aug 20 '15 at 05:01
@AlexZahir the div does take full height, the problem is the image, let me see why its doing that, i'll get back to you – Luthando Ntsekwa Aug 20 '15 at 05:16
but the background color is set on the div. i dont want the image to stretch. just show the background color which it isnt doing now – Alex Zahir Aug 20 '15 at 05:19
@AlexZahir it does show your background color, change it to something else, you will see it clear, e.g `background: red;` – Luthando Ntsekwa Aug 20 '15 at 05:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87439/discussion-between-alex-zahir-and-luthando-loot). – Alex Zahir Aug 20 '15 at 05:45

score 1 · Answer 2 · edited Feb 02 '16 at 21:35

First of all you need to fix the class names that missed '-' in your jQuery code.

If you want to get the .col-1 height you can do it in several ways, that I will discuss later.

Before that in each case you need to write a function that gives .col-1 height and set .col-2 .

$(document).ready(function() {

    function set_heights(){
        var divHeight = $('.col-1').height(); 
        $('.col-2').css('min-height', divHeight+'px');
    }

});

Then you just call the function whenever you need...

Some of different ways are :

to set interval or timer to call above function once in a period of time you need.
```
setInterval(function(){  set_heights(); }, 100);
```
use resize event for .col-1 . to call above function when ever .col-1 changed.
```
$('.col-1').resize(function(){
    set_heights();
});
```
use bind

remember!!! for responsive design you need too call above function even when window resized !

Good luck !

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

$('.col-2').css({'minHeight': divHeight+'px'});

you can place this in a callback. so it is executed when height is changed. like this Detecting when a div's height changes using jQuery

edited May 23 '17 at 10:28

Community

1
1

answered Aug 20 '15 at 04:45

atinder

2,080
13
15

But not in HTML code. In HTML it is `col-1` and `col-2`. Don't you think that might be actual issue – Tushar Aug 20 '15 at 04:50

score 0 · Answer 4 · answered Aug 20 '15 at 04:48

Add a resize event listener, when col-2 resize, trigger a function to resize col-2

$(document).ready(function() {
    $('.tb-col1').resize(function(){
       var divHeight = $('.col-2').height(); 
       $('.col-2').css('minHeight', divHeight+'px');
    }
});

jQuery set height of a div to the 'dynamic height' of another

4 Answers4