Rock-Solid Equal Height Columns


/ Published in: JavaScript
Save to your folder(s)

Dynamic equal height columns that account for padding and borders.


Copy this code and paste it in your HTML
  1. //Dynamic Equal Height Columns *Pure JS
  2. function eqHeight(parent_id) {
  3. var child = document.getElementById(parent_id).childNodes, childAmount = child.length, boxHeight = 0;
  4. // Find the greatest height
  5. for(var i = childAmount - 1; i >= 0; i--) {
  6. if(child[i].offsetHeight && child[i].offsetHeight > boxHeight) {
  7. child[i].style.height = '';
  8. boxHeight = child[i].offsetHeight;
  9. }
  10. }
  11. // Apply the greatest height to all child elements while accounting for padding and borders
  12. for(var i = childAmount - 1; i >= 0; i--) {
  13. if(child[i].offsetHeight) {
  14. child[i].style.height = boxHeight + 'px';
  15. }
  16. if(child[i].offsetHeight > boxHeight) {
  17. child[i].style.height = boxHeight - (child[i].offsetHeight - child[i].clientHeight) + 'px';
  18. child[i].style.height = boxHeight - ((child[i].offsetHeight - boxHeight) + (child[i].offsetHeight - child[i].clientHeight)) + 'px';
  19. }
  20. }
  21. }
  22. window.onload = function() { eqHeight('object_group'); }
  23. window.onresize = function() { eqHeight('object_group'); }

URL: http://jsfiddle.net/LmbmR/13/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.