Last Updated: February 25, 2016
·
836
· kugaevsky

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
  [].forEach.call query, (element) ->
    element.style.height = 'auto'
    max = element.clientHeight if (element.clientHeight > max)
  [].forEach.call query, (element) -> element.style.height = max + 'px'

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

All inner divs will have the same height.

<div class="same-height">
  <div></div>
  <div></div>
  <div></div>
</div>