About design and nearby

How to Set Equal Height of Elements

Posted: October 8th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | 1 Comment »

Creating elements with equal height is not as easy as it may first seem. Once I was playing with Twitter Bootstrap 3 layouts trying to make two div elements the same height in the row and do not loose responsibility.

The problem is that I had two columns each with different amount of content. And every column background color stretches only as far down as the height of the content it contains.

There are a lot of proposed CSS solutions (based on height:100%; of all nested elements or on display:table; properties, even smart solution with relative & absolute positioning.. but neither of above didn’t work for me and Bootstrap 3).

So I decided to stick to Javascript:

  1. $( document ).ready(function() {
  2.  
  3.  var heights = $(".inner-page").map(function() {
  4.         return $(this).height();
  5.     }).get(),
  6.  
  7.     maxHeight = Math.max.apply(null, heights);
  8.  
  9.     $(".inner-page").height(maxHeight);
  10.  
  11. });


The HTML:

  1. <div class="row equalizer">
  2.  <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
  3.   <div class="well">
  4.    <div class="inner-page">
  5.     <div id="primary" class="content-area">
  6.      <main id="main" class="site-main" role="main">
  7.        <p>My 1st column content.</p>
  8.      </main><!– #main –>
  9.     </div><!– #primary –>
  10.    </div>
  11.   </div>  
  12.  </div>
  13.  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  14.   <div class="well">
  15.    <div class="inner-page">
  16.     <p>My 2nd column content.</p>
  17.    </div>
  18.   </div>
  19.  </div>
  20. </div>

Note: Everything above looks perfect, but.. as I said, we are talking about Bootstrap 3 framework, which is built with thoughts about responsive design )). So in case of smaller window size (say, for ‘div class=”col-xs-12’ case) we get both elements with the same height (and width:100%;) one below another.. and with empty space, if we have not enough content to fill in [equally]. I decided to use the same height of my columns for special case only: when it’s larger than 780px (the rest is covered by css):

  1.  $( document ).ready(function() {
  2.  
  3.  //detect window size
  4.  if ($(window).width() > 780)
  5.  {
  6.  
  7.         var heights = $(".inner-page").map(function() {
  8.          return $(this).height();
  9.      }).get(),
  10.  
  11.      maxHeight = Math.max.apply(null, heights);
  12.  
  13.      $(".inner-page").height(maxHeight);
  14.  }
  15.  
  16.  //detect resize
  17.  $(window).resize(function () {
  18.  
  19.         if ($(window).width() > 780)
  20.   {
  21.             var heights = $(".inner-page").map(function()
  22.   {
  23.          return $(this).height();
  24.      }).get(),
  25.  
  26.      maxHeight = Math.max.apply(null, heights);
  27.  
  28.      $(".inner-page").height(maxHeight);
  29.      
  30.         }
  31.  });
  32.  
  33.  });
Share Button

Check Related Posts:

One Comment on “How to Set Equal Height of Elements”

  1. 1 Lisa said at 10:17 pm on March 11th, 2015:
    Reply  |  Quote

    Thank you for this code. It helped me a lot. It seems to be a common problem with divs that have different amounts of content. I hope more people find your code solution. Thanks so much!! Greetings from the United States.


Leave a Reply


  • + five = 12

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now