Setting equal heights for div s with jQuery

Question

I want to set equal height for divs with jQuery   All the divs may have different amount of content and different default height  Here is a sample of my html layout    lt div class  container  gt       lt div class  column  gt This is lt br   gt the highest lt br   gt column lt  div gt       lt div class  column  gt One line lt  div gt       lt div class  column  gt Two lt br   gt lines lt  div gt   lt  div gt   lt div class  container  gt       lt div class  column  gt One line lt  div gt       lt div class  column  gt Two lt br gt lines lt  div gt       lt div class  column  gt One line lt  div gt   lt  div gt    I m setting the height with the next jQuery function     document  ready function         var highestBox   0              container  column   each function                      if   this  height    gt  highestBox                     highestBox     this  height                                    container  column   height highestBox          This works fine but not in my case because I want all the  columns  equal only inside one  container   This means that in the first container all the boxes must be as high as the first div  but in the second one they must be equal to second column   So question is -- how should I modify my jQuery to reach this   Thank you

User · Accepted Answer

Answer to your specific question  Your code was checking all columns within any container  what you need to do is    Loop through each container   Get the heights of each column within that container Find the highest one  Apply that height to every column in that container before moving on to the next one        Note  Try to provide an example jsfiddle of your issue  it enables us   to more easily help you and understand the issue  you get to see the   working solution straight away and it encourages quicker responses    Quick  Rough  Example   x000D   x000D    document  ready function    x000D   x000D         Select and loop the container element of the elements you want to equalise x000D          container   each function      x000D         x000D           Cache the highest x000D        var highestBox   0  x000D         x000D           Select and loop the elements you want to equalise x000D            column   this  each function    x000D           x000D             If this box is higher than the cached highest then store it x000D          if   this  height    gt  highestBox    x000D            highestBox     this  height     x000D            x000D         x000D              x000D               x000D           Set the height of all those children to whichever was highest  x000D            column  this  height highestBox   x000D                       x000D           x000D   x000D      x000D   container   border 1px solid red    x000D   column   border  1px solid blue  float left  width  30   text-align center    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D       lt div class  column  gt This is lt br   gt the highest lt br   gt column lt  div gt  x000D       lt div class  column  gt One line lt  div gt  x000D       lt div class  column  gt Two lt br   gt lines lt  div gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D       lt div class  column  gt One line lt  div gt  x000D       lt div class  column  gt Two lt br gt lines lt  div gt  x000D       lt div class  column  gt One line lt  div gt  x000D   lt  div gt  x000D   x000D   x000D         Library       Here s a library i found that looks promising if you want some more   clever equalisation controls      http   brm io jquery-match-height-demo        Addressing  Mem s question     Question  Will   document  ready   work if you have images that need to load which in turn modify the heights of the containers      Equalising heights after image load  If you are loading images  you will find that this solution doesn t always work  This is because document ready is fired at the earliest possible time  which means it does not wait for external resources to be loaded in  such as images    When your images finally load  they may distort the heights of their containers after the equalisation script has run  causing it too appear not too work     Solving equalising heights with images   Bind to image loading events   This is the best solution  at the time of writing  and involves binding to the img load event  All you have to do is get a count of how many img s there are    img   length and then for each load  -1 from that count until you hit zero  then fire the equaliser   The caveat here is load may not fire in all browsers if the image is in the cache  Look around google github  there should be a solution script out there  At the time of writing i found waitForImages from Alexander Dickson  untested  this is not an endorsement      Another more reliable solution is the window load event  This should generally always work  However  if you check the docs out  you ll notice this event fires after ALL external resources are loaded  This means if your images are loaded but there s some javascript waiting to download it won t fire until that completes    If you load the majority of your externals asyncronously and are clever with minimising  compressing and spreading the load you probably wont have any issues with this method  however a suddenly slow CDN  happens all the time  could cause issues   In both cases  you could take a dumb approach and apply fallback timers  Have the equalise script run automatically after a set few seconds just in case the event doesn t fire or something is slow out of your control  It s not fool proof  but in reality you ll satisfy 99  of your visitors with this fallback if you tune the timer correctly     Years later this is still getting upvotes  with flexbox widely supported these days you may want to consider just plain CSS for this  unless there s a specific reason you are using JS for it   x000D   x000D   container   x000D    display  flex  x000D    border  2px dashed red  x000D    margin  10px 0  x000D    x000D   x000D   container  gt   column    x000D   padding  10px  x000D    x000D   x000D   container fill-width   x000D    justify-content  stretch  x000D    x000D   x000D   container fill-width gt  column   x000D    flex-grow  1 x000D    x000D   x000D   container gt  column nth-child 1    x000D    background  yellow  x000D    x000D   x000D   container gt  column nth-child 2    x000D    background  blue  x000D    x000D   x000D   container gt  column nth-child 3    x000D    background  green  x000D    x000D   lt div class  container  gt  x000D     lt div class  column  gt Some lt br gt text lt  div gt  x000D     lt div class  column  gt Some lt br gt more lt br gt text lt br gt here lt  div gt  x000D     lt div class  column  gt One line lt  div gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt div class  column  gt Some lt br gt more lt br gt even lt br gt longer lt br gt text lt br gt here lt  div gt  x000D     lt div class  column  gt Some lt br gt text lt  div gt  x000D     lt div class  column  gt One line lt  div gt  x000D   lt  div gt  x000D   lt div class  container fill-width  gt  x000D     lt div class  column  gt Some lt br gt more lt br gt text lt br gt here lt  div gt  x000D     lt div class  column  gt Some lt br gt text lt  div gt  x000D     lt div class  column  gt One line lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need imagesLoaded if the container have images inside  This works for responsive too     document  ready function            equalHeight   column          window  resize function   equalHeight   column        function equalHeight columnClass           eq-height-wrap   imagesLoaded function                eq-height-wrap   each function                   var maxHeight   Math max apply null    this  find columnClass  map function                                  return   this  innerHeight                   get                    columnClass this  height maxHeight

User · Answer

There is a jQuery plugin for this exact purpose  https   github com dubbs equal-height  If you want to make all columns the same height  use       columns   equalHeight      If you want to group them by their top position  eg  within each container       columns   equalHeight   groupByTop  true

User · Answer

x000D   x000D  var currentTallest   0  x000D       currentRowStart   0  x000D       rowDivs   new Array    x000D        el  x000D       topPosition   0  x000D   x000D       blocks   each function     x000D   x000D      el     this   x000D     topPostion    el position   top  x000D      x000D     if  currentRowStart    topPostion    x000D   x000D          we just came to a new row   Set all the heights on the completed row x000D       for  currentDiv   0   currentDiv  lt  rowDivs length   currentDiv      x000D         rowDivs currentDiv  height currentTallest   x000D         x000D   x000D          set the variables for the new row x000D       rowDivs length   0     empty the array x000D       currentRowStart   topPostion  x000D       currentTallest    el height    x000D       rowDivs push  el   x000D   x000D       else   x000D   x000D          another div on the current row   Add it to the list and check if it s taller x000D       rowDivs push  el   x000D       currentTallest    currentTallest  lt   el height        el height       currentTallest   x000D   x000D      x000D      x000D       do the last row x000D     for  currentDiv   0   currentDiv  lt  rowDivs length   currentDiv      x000D       rowDivs currentDiv  height currentTallest   x000D       x000D      x000D        x000D      blocks   would be changed to use whatever CSS selector you need to equalize  x000D   x000D   x000D

User · Answer

I wish i d read this post before I  with help from Earl  created this one  setMaxHeightForTitles  column   title          var maxHeight   0         column find  title         each function index  title           var height     title  height            if   height  gt  maxHeight  maxHeight   height                  each function index  title             title  height maxHeight

User · Answer

lt script gt  function equalHeight group       tallest   0     group each function           thisHeight     this  height          if thisHeight  gt  tallest             tallest   thisHeight                    group height tallest       document  ready function        equalHeight     column          lt  script gt

User · Answer

You need this       container   each function           var  columns       column  this        var maxHeight   Math max apply Math   columns map function             return   this  height            get           columns height maxHeight         Explanation   The following snippet constructs an array of the heights    columns map function        return   this  height       get    Math max apply  Math  array   finds the maximum of array items  columns height maxHeight   sets all columns  height to maximum height    Live demo

User · Answer

Important improvement   I added   this  height  auto    before measuring height - we should reset it to auto  Then we can use this function on resize   function equalheight                      cont for height   each function                       var highestBox   0                      column height   this  each function                         var htmlString      this   html                                              this  height  auto                         if   this  height    gt  highestBox                          highestBox     this  height                                                column height  this  height highestBox

User · Answer

function setEqualHeight columns      var tallestColumn   0     columns each function        var currentHeight     this  height         if currentHeight  gt  tallestColumn         tallestColumn    currentHeight                 columns height tallestColumn        gt  setEqualHeight     column

User · Answer

Here is what worked for me  It applies the same height to each column despite their parent div     document  ready function              var  sameHeightDivs       column        var maxHeight   0       sameHeightDivs each function             maxHeight   Math max maxHeight    this  outerHeight                  sameHeightDivs css   height  maxHeight    px            Source

User · Answer

So  below the jquery script to set the equal height to column which Math max will calculate the two divs height and takes the highest height either it may be left or right     document  ready function     var Equalheights   Math max       left     height          right     height           left      Equalheights d         right      Equalheights d       Highest height will be assigned to both left and right divs   Live Demo

User · Answer

Select and loop the container element of the elements you want to equalise             equal   each function                    Cache the highest           var highestBox   0                Select and loop the elements you want to equalise               col-lg-4   this  each function                    If this box is higher than the cached highest then store it             if   this  height    gt  highestBox                  highestBox     this  height                                                  Set the height of all those children to whichever was highest                col-lg-4  this  height highestBox

User · Answer

document  ready function             container   each function              var highestBox   0             this  find   column   each function                if   this  height    gt  highestBox                     highestBox     this  height                                          this  find   column   height highestBox

User · Answer

You can write the function this way also Which helps to build your code one time  just to add class name or ID at the end  function equalHeight group                   tallest   0                 group each function                       thisHeight   jQuery this  height                      if thisHeight  gt  tallest                         tallest   thisHeight                                                        group height tallest                             equalHeight jQuery  Add your class

User · Answer

lt div class  a   gt      lt div class   cols-to-eq   gt  lt  div gt      lt div class   cols-to-eq   gt  lt  div gt      lt div class   cols-to-eq   gt  lt  div gt      lt div class   cols-to-eq   gt  lt  div gt   lt  div gt   lt div class  b   gt      lt div class   cols-to-eq   gt  lt  div gt      lt div class   cols-to-eq   gt  lt  div gt      lt div class   cols-to-eq   gt  lt  div gt      lt div class   cols-to-eq   gt  lt  div gt   lt  div gt  var a      a    b    a forEach function value        var column   0        value  find   cols-to-eq   each function            if   this  height    gt  column               column     this  height                            value  find   cols-to-     eq   attr  style   height   column  px

User · Answer

You can reach each separate container using  parent   API   Like   var highestBox   0              container  column   each function                      if   this  parent   height    gt  highestBox                     highestBox     this  height

User · Answer

This is my version of setting blocks in the same hight    For example you have a divthat contains divs with the name  col       col   parent   each function         var height   0          column     this  find   col        column each function             if    this  height    gt  height  height     this  height                column height height

[jquery] Setting equal heights for div's with jQuery

Examples related to jquery

Examples related to html

Examples related to height

Examples related to equals