项目作者: ArthurShlain

项目描述 :
Equal height of DOM elements
高级语言: JavaScript
项目地址: git://github.com/ArthurShlain/js-sameheight-helper.git
创建时间: 2019-02-27T11:09:46Z
项目社区:https://github.com/ArthurShlain/js-sameheight-helper

开源协议:

下载


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.

  1. sameHeight();

To update height on window resize use resize event:

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

Example

  1. <div class="row same-height-group">
  2. <div class="col same-height">
  3. <p>First column</p>
  4. </div>
  5. <div class="col same-height">
  6. <p>Second column<p>
  7. <p>Second column<p>
  8. </div>
  9. <div class="col same-height">
  10. <p>Third column</p>
  11. <p>Third column</p>
  12. <p>Third column</p>
  13. </div>
  14. </div>
  15. <script>
  16. document.addEventListener('DOMContentLoaded', function(){
  17. sameHeight();
  18. });
  19. window.addEventListener('resize', function(){
  20. sameHeight();
  21. }, true);
  22. </script>