The web offers multiple solutions for implementing equal height columns using CSS but a design obstacle often overlooked is implementing equal height divs within columns. This particular problem often demonstrates itself in cards where the actual content of the cards is different than that of the design hence the output seems a bit off than that on the wireframe.
Illustration of the problem:
The Design:
Actual Content:
The Problem:
The Solution:
Make the title and text height equal in all columns in order to reflect the design on the actual output.
A simple JQuery function executed on page load that targets the specific elements that should have the same height (e.g Title and Text) and automatically adjusts the height of such elements based on the element with the maximum height can be implemented to achieve equal height divs within columns.
$.fn.equalHeights = function(){
let maxHeight = 0;
$(this).each(function(){
maxHeight = Math.max($(this).height(), maxHeight);
});
$(this).each(function(){
$(this).height(maxHeight);
});
};
Usage:
The function is used by targeting each parent container that contains the columns and then executing the function on the specific elements within the container.
$(‘.triple-block-section’).each(function() {
$(this).find(‘.card-title’).equalHeights()
$(this).find(‘.card-text’).equalHeights()
})
Full Code:
// function
$.fn.equalHeights = function(){
let maxHeight = 0;
$(this).each(function(){
maxHeight = Math.max($(this).height(), maxHeight);
});
$(this).each(function(){
$(this).height(maxHeight);
});
};
// usage
$(‘.triple-block-section’).each(function() {
$(this).find(‘.header’).equalHeights()
$(this).find(‘.card-text’).equalHeights()
})
