Adjust the height of all panels in a row according to the content

Question

I have a row which contains four panels. I want the height of all panels in same height. For example: Due to addition of content in the second panel, the height of it changed a bit and it is not in the same height as other panels.I want the height of all other panels to be changed automatically. I have give a minimum height of 250 pixels to my panels.If height of one of the panels exceed 250 px, all panels should adjust automatically.If height of one of the panels is less than 250 pixels ( as content is passes to the panels dynamically), the height should remain as 250 pixels.

My problem (image) link

In above image, second panel content is changed, but rest of the panels are in original height.

What I require (image) link

My code

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default" style="min-height:250px;">
                <div class="panel-body">
                    Panel
                </div>
            </div> 
        </div> 
    </div> 
</div> 

Please help me to solve my issue. Can we do it with css alone or should we use Js for it?

Answer 1

Since you are using Bootstrap, you must also be using jQuery, so I have used it here. First set the height, then iterate through a ll panels to find the maximum height and set that and then apply that height to all the panels.

This allows all panels to be set to the same height and will adjust if one is displayed at a greater height than the others. Note you should also have your min-height set as you already have it. That was just the starting point for this. and you should also remove that min-height inline styling and put it in the CSS outside of the HTML.

var maxHeight=250;

$('.panel').each(function(){
var height=$(this).height();
if(height> maxHeight){maxHeight=height}
});

$('.panel').css('height',maxHeight+'px');