Last Updated: February 25, 2016
·
1.053K
· 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>

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside