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>
Written by Nick Kugaevsky
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Coffescript
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#