In front-end development, we often encounter the need for equal height layouts. The most intuitive way is to set all elements within the container to float or inline-block.

float and inline-block

If using float for layout, you not only need to clear the parent element container (clearfix) first, but also set margins for the child elements. Therefore, when the content is too long or the height is insufficient, it will cause layout issues.

Moreover, the biggest drawback of this layout is that height must be set.

So, what if we don't set the height? Even if min-height is set, when the content exceeds the height, it will inevitably face the risk of overflow.

Later, I decided to directly use CSS media queries to give different heights for different screen widths. Although the solution is more complicated and a bit uglier, it does solve the problem of layout issues when the width is too narrow.

This problem has been buried deep in my heart until I recently discovered the secret of flex.

When facing layout difficulties, think of flex

When facing setbacks in life, think of flex, this flexible box often saves lives. Flex is already supported by most mainstream browsers and it is really useful!

When setting display to flex, if the child elements do not have a set height, the height of the child elements will be the tallest among them.

A single property solves the problem I have been thinking about day and night, truly elegant flex.

But besides that, we still need to make some adjustments to the layout. By default, if flex-wrap property is not set for flex, it will display in a single line to expand the parent container. Therefore, we can add another line.

.wrap {
  flex-wrap: wrap;
}

Alright, the responsive layout with equal height is complete without declaring height. The CSS would look something like this:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  height: auto;
  width: 30%;
  border: 1px solid #aaa;
}

What about browsers that don't support flex?

First of all, flex is already supported by most mainstream browsers, so don't use lack of support as an excuse to ignore the usefulness of flex. But if the browser really doesn't support it, you can use JavaScript to do the layout. The main principle is not to set the height, detect all elements inside the container, find the tallest one, and apply this height to each element.

Here is a basic example code:

var cards = document.querySelectorAll(".card")

function getMaxinumHeight(elements) {
  var nums = []

  elements.forEach(function(value) {
    nums.push(value.offsetHeight)
  })

  return nums.sort(function(a, b) {
    return a < b
  })[0]
}

var maxHeight = getMaxinumHeight(cards)
cards.forEach(value => {
  value.style.height = maxHeight + "px"
})

Table is the new sexy

Although the old-fashioned table layout has been abandoned, for scenarios like equal height where flex cannot be used, you can achieve equal height layout using the features of tables.

To achieve table layout, you can use display: table, display: table-row, display: table-cell.

display: table is equivalent to <table>; display: table-row is equivalent to <tr>; display: table-cell is equivalent to <td>.

However, although it can achieve equal height effect, the HTML markup becomes more complicated. Moreover, tables still have some limitations in usage, such as margin not working inside table, etc., which are major obstacles when implementing mockups. So, if you can use flex, it is better to use flex as much as possible!

Further reading

Flexbox responsive equal height