CSS: Equal height columns
Ever have 3 columns side by side one another and you’re trying to get them all
to have their own background color that syncs in terms of height?
Here’s a little JS snippet that may
help.
$('.row[data-match-height]').each(function(){
var self = $(this);
self.find('.panel').height(self.height());
$(window).on('resize', function(event) {
var row_width = self.width();
var panels = self.find('.panel');
// Reset height of the panels
panels.height('');
var h = self.height();
panels.each(function() {
var panel = $(this);
if ((row_width - panel.width()) > 40) {
panel.height(h);
}
});
});
});
Replace .panel with .yourcolumnclass and you’re good to go!