This time I will share jQuery Plugin and tutorial about Child Elements Equal Height Plugin With jQuery, hope it will help you in programming stack.
Yet another jQuery equal height plugin that makes all the child elements of a parent container equal in height. Works responsively & perfectly with any CSS frameworks like Bootstrap, Semantic, Foundation, etc.
How to use it:
1. Load the latest version of jQuery and the jQuery Equal Height Children plugin in your web page.
1 |
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></ script > |
2 |
< script src = "jquery.equalHeightChildren.js" ></ script > |
2. Add the essential data-equal-height-children
attribute to the parent element.
1 |
< div class = "container" data-equal-height-children> |
3. That’s it. The plugin will automatically search through all child elements and make them have the same height.
Change log:
2016-08-03
- Logic changed, iterative approach
2016-08-02
- reset height before calling
This awesome jQuery plugin is developed by AfzalH. For more Advanced Usages, please check the demo page or visit the official website.