Skip to content

Latest commit

 

History

History
52 lines (40 loc) · 958 Bytes

README.md

File metadata and controls

52 lines (40 loc) · 958 Bytes

js-sameheight-helper

This script make equal height for your columns.

How to use

Add class .same-height-group to wrapper of elements (row).

Add class .same-height to each element (columns).

Use method sameHeight to update height of elements.

sameHeight();

To update height on window resize use resize event:

window.addEventListener('resize', function(){
    sameHeight();
}, true);

Example

<div class="row same-height-group">
  <div class="col same-height">
    <p>First column</p>
  </div>
  <div class="col same-height">
    <p>Second column<p>
    <p>Second column<p>
  </div>
  <div class="col same-height">
    <p>Third column</p>
    <p>Third column</p>
    <p>Third column</p>
  </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function(){
      sameHeight();
    });

    window.addEventListener('resize', function(){
        sameHeight();
    }, true);    
</script>