1

There a ton of answers on SO on how to make columns equal height based upon the content of the largest column, however I am looking to make all columns equal height based upon the smallest column.

enter image description here

In this example, I want all columns to have the same height as the middle column and the content within the two larger columns to scroll. I am using Bootstrap 4 but am open to any other solutions.

McLovin
  • 1,455
  • 3
  • 19
  • 37
  • So the smallest column height can be variable, and you need to detect it then use that to set the other heights? – BattlFrog Jun 11 '19 at 22:04
  • Yep that's correct! – McLovin Jun 11 '19 at 22:20
  • 1
    Measure them all and set the height of the other ones? Same code as making match the max. Unsure what your question is. You ought to try something, then ask a question if it doesn't work including the code you tried and any error messages/unexpected behavior – Ruan Mendes Jun 12 '19 at 02:03
  • 1
    where is your HTML, please follow the rules of [MCVE](https://stackoverflow.com/help/mcve) – Nisharg Shah Jun 12 '19 at 02:18

1 Answers1

0

You might have to use javascript.

  1. Store all the column heights into an array.
  2. Loop through and pick the smallest height.
  3. Set the height of the other divs based on the smallest height.
// Get all the columns
const columns = document.querySelectorAll('.column');
// Array for storing height values for columns
var columnHeights= [];

// Add Column Heights to array
for(index=0; index<columns.length; index++) {
    column= columns[index];
    columnHeights.push(column.getBoundingClientRect().height);

}
// Get the minimum column height
Array.min = function(heightsArray){
    return Math.min.apply( Math, heightsArray );
};
var minimumHeight = Array.min(columnHeights);

// Set the height of the other columns based on the minimum height
columns.forEach(col => {
    col.style.height = minimumHeight+'px';
});

A working pen is here

Caleb
  • 105
  • 2
  • 10
  • Why would you modify the Arrays object adding a min function? Answers should focus on the problem and avoid introducing unnecessary code. – Ruan Mendes Jun 12 '19 at 02:02