Adjust Divs height related to another Div

Question

I have four divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. means, if one grows because text is placed into it, the other one should grow to match the height.

Here is my :Fiddle

Please resize the width of answer

Thank you.

Well, there are 2 side-by-side in 2 rows, so do you mean they all 4 should have same height? ... Or all 4 should be on the same row? — Asons, Aug 18 '17 at 09:17
@LGSon, In Smaller Screen that's not a problem. But larger screen it split into 2 lines. so, that time the problem happens. — Melbin Mathai, Aug 18 '17 at 09:20
Okay, to make elements on different rows the same height you need a script...elements on the same row can keep same height using CSS, which is normally more important, so they all vertical align properly — Asons, Aug 18 '17 at 09:20
@LGSon All 4 they have same height. Please help me to do this. I am not familiar with scripts. — Melbin Mathai, Aug 18 '17 at 09:21
I updated your tags to include script, to attract users with more experience when it comes to script based solutions — Asons, Aug 18 '17 at 09:26
Possible duplicate https://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery — Asons, Aug 18 '17 at 09:28
take a look on this article http://vanseodesign.com/css/equal-height-columns/ — RaJesh RiJo, Aug 18 '17 at 09:28

Dmytro Lishtvan · Accepted Answer · 2017-08-18T09:52:00.667

1

here is your solution you should use display:flex

jsfiddle.net/94uvouzw/7/

edited Aug 18 '17 at 09:52

answered Aug 18 '17 at 09:47

Dmytro Lishtvan

788
7
12

score 1 · Answer 2 · edited Sep 11 '17 at 07:57

1

$(document).ready(function(){
    var height;
    var maxHeight = 0;
    $(".test").each(function(){
        height = $(this).height();
        if(height > maxHeight) {
            maxHeight = height;
        }
    });
    $(".test").css("height",maxHeight);
});

By using jQuery

Demo Fiddle

edited Sep 11 '17 at 07:57

Vikrant

4,920
17
48
72

answered Sep 07 '17 at 07:35

Mayuresh Shahane

29
3

You can always add [JSFiddle](http://jsfiddle.net/) to your jquery answer to make it more clear and acceptable. – Vikrant Sep 08 '17 at 04:48

Adjust Divs height related to another Div

2 Answers2