🥇 Colunas de mesma altura com javascript (café para ser honesto)

Às vezes, não é possível usar hacks CSS com o estilo “display: table-cell” para seus divs.
Portanto, aqui está um pequeno trecho de código para tornar suas colunas div da mesma altura. Ele mantém suas alturas iguais, mesmo quando você redimensiona a janela.

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()

Todos os divs internos terão a mesma altura.

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

Related Posts