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');

Answer 2

If you would prefer a pure css solution you could easily do this by using flex. Please note that with this solution you have to bare in mind the browser support. See here: http://caniuse.com/#search=flex

But with css and flex you could do:

 .wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .innerdiv { width: 22%; /* 4 items per row */ float: left; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: red; margin: 0 1%; min-height: 250px; /* Your min-height if needed */ } 

 <div class="wrapper"> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> 

You would of course need to implement this into your html/classes etc. Sorry for not providing it straight but just wrote the snippet quickly.

EDIT:

Well, I'll ad an jQuery way of doing this also so you do not need to worry about browser support if you use this. Maybe this will help someone in the future. You could also check the browser support for flex in javascript and as a fallback use the jQuery to set the height of the divs.

 (function($, window, document, undefined) { 'use strict'; var doc = document.body || document.documentElement, doc = doc.style; // This would check the browser support for flex and only use this fallback if there is no support (otherwise use css) /* if(doc.webkitFlexWrap == '' || doc.msFlexWrap == '' || doc.flexWrap == '') { return true; } */ var $wrapper = $('.wrapper'), $items = $wrapper.find('.innerdiv'), setDivHeight = function() { $items.css('height', 'auto'); var itemsPerRow = Math.floor($wrapper.width() / $items.width()); if(itemsPerRow == null || itemsPerRow < 2) { return true; } for(var i = 0, j = $items.length; i < j; i += itemsPerRow) { var maxHeight = 0, $item = $items.slice(i, i + itemsPerRow); $item.each( function() { var itemHeight = parseInt($(this).outerHeight()); if (itemHeight > maxHeight) { maxHeight = itemHeight; } }); $item.css('height', maxHeight); } }; setDivHeight(); $(window).on('resize', setDivHeight); $wrapper.find('img').on('load', setDivHeight); })(jQuery, window, document); 

 .innerdiv { width: 22%; float: left; background-color: red; margin: 0 1%; min-height: 250px; /* your min-height if needed */ } img { height: auto; width: 100%; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <img src="http://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" alt="Large image" /> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="innerdiv"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> 

EDIT 2:

I also added a way to watch for images loading in the jQuery function and recalculating the height in each image load.

Answer 3

Use display:flex and reuse the Twitter Bootstrap classes. Write less, do more!

.row {
    display: flex;
}

.row .col {
    display: flex;
    align-items: stretch;
}

.row .col .panel {
    width: 100%;
}

.row .col .panel .panel-body {
    min-height: 250px;
}

https://jsfiddle.net/alexndreazevedo/143ez30b/

Answer 4

set min-height to panel-body in this way

CSS

.panel-body{
   min-height:250px !important;
}

HTML

<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
    <div class="panel-body">
        Panel
    </div>
</div> 
</div> 
</div> 
</div> 

Answer 5

You can do this using a very easy to use jQuery plugin named Match Height

Some features of this library which you will not find in others solutions ( simple ones )

1. match the heights for groups of elements automatically
2. use the maximum height or define a specific target element
3. anywhere on the page and anywhere in the DOM
4. responsive (updates on window resize)
5. row aware (handles floating elements and wrapping)
6. accounts for box-sizing and mixed padding, margin, border values
7. handles images and other media (updates after loading)
8. supports hidden or none-visible elements (eg those inside tab controls)
9. throttled to balance performance and smoothness
10. easily removed when needed
11. maintain scroll position

Answer 6

<script>
var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight); //get the max height
document.getElementById("left").style.height = a + "px";
document.getElementById("center").style.height = a + "px";
document.getElementById("right").style.height = a + "px";
</script>

 <script> var a = Math.max(document.getElementById("left").offsetHeight,document.getElementById("center") .offsetHeight,document.getElementById("right").offsetHeight); document.getElementById("left").style.height = a + "px"; document.getElementById("center").style.height = a + "px"; document.getElementById("right").style.height = a + "px"; </script>