Display two Views blocks with equal height

Question

I have created two Views Blocks "NEWS" and "BLOG", which resides side by side on my front page.

Both the views have 20 contents (but can be any number) in it and a pager. How do I display contents in views block, so that the both views end up with equal height regardless of number of contents displayed.

Answer 1

Try using the equal heights module

This module implements a jQuery Equal Heights plugin that can equalize the height of the elements of the specified class.

To use it, give the elements the same class, then go to the administration interface and add this class (separate multiple classes by a space). By default, it sets the height to the height of the tallest element but you can also specify minimum and maximum height.

To use the just give both the blocks the same class and add the admin name in the admin interface of the module and then js will do the rest.

Answer 2

Installing module to achieve small task is bit too much in my opinion. I would rather apply equal heights JS library https://github.com/mattbanks/jQuery.equalHeights and following script to the main JS file.

$('.yourelements').equalHeights();

This function will calculate the tallest container of the N-containers and apply in-line css height attribute to all the containers to match equal heights. So you don't have to set height as you can't predict the actual height.

Answer 3

Get the css ID of blocks using Firebug write css like

#block-search-form, #block-system-navigation {
    height: 200px;
}

Answer 4

If you don't want to use a Module or Plugin I completed this with Jquery. Your views need to have the same class and the below simply looks at each of them, decides which one is higher and sets both their height to the highest value.

  function equalHeight() {
   var height = 0;
   var $items = $('.item-blocks');
   $items.each(function() {
    if($(this).height() > height) {
      height = $(this).height();
    }
  });

  $items.css('height', height);
 }