Last Updated: February 25, 2016
· kugaevsky
Ava white

Same height columns with javascript (coffee to be honest)

Somtimes it is not possible to use CSS hacks with "display: table-cell" style for your divs.
So here is a small code snippet to make your div columns the same height. It keeps their heights equal even when your resizing window.

sameHeights = (selector) ->
  selector = selector || '.same-height > div'
  query = document.querySelectorAll selector
  max = 0
  [] query, (element) -> = 'auto'
    max = element.clientHeight if (element.clientHeight > max)
  [] query, (element) -> = max + 'px'

window.addEventListener 'resize', -> sameHeights()
window.addEventListener 'load', -> sameHeights()

All inner divs will have the same height.

<div class="same-height">