使列高等于最小列

Question

关于SO如何基于最大列的内容使列相等的高度有很多答案，但是我希望基于 smallest 列使所有列相等的高度。 / p>

在此示例中，我希望所有列都具有与中间列相同的高度，并且要滚动两个较大列中的内容。我正在使用Bootstrap 4，但可以使用其他任何解决方案。

Answer 1

您可能必须使用javascript。

1. 将所有列高存储到数组中。
2. 环游并选择最小的高度。
3. 根据最小高度设置其他div的高度。

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

一支工作笔是here