achieving equal height columns in a responsive / flexible layout

Question

I'm trying to achieve equal height columns on a 'responsive' website.

That means I'm using media queries to provide several layouts for one website depending on the size of the device and window.

I have 2 columns which need to have the same height. It's easy to achieve when the layout is fixed. I found dozens of scripts that do it and it works well.

However when I resize the browser window, that generated height doesn't change. So if the window is smaller, the height of the columns stays the same as before and the contents of the columns overflows. It's ugly.

Is there a way that generated height could change as I resize the window ?

Note : because of what's inside the columns I cannot use any CSS trick with backgrounds images etc. I really REALLY need both columns to truly have the same height at all times.

Answer 1

This question is already pretty old, but I didn't stumble upon a good solution for this myself until now.

A working solution would be a jQuery plugin that does something like setting the height of the columns to 'auto', measuring which one is the highest and set the columns to that height. Something along the lines of this:

$.fn.eqHeights = function (options) {
  var $el = $(this),
    $window = $(window),
    opts = $.extend({}, $.fn.eqHeights.defaults, options);
  if ($el.length > 0 && !$el.data('eqHeights')) {
    $(window).bind('resize.eqHeights', function () {
      $el.eqHeights(opts);
    });
    $el.data('eqHeights', true);
  }
  return $el.each(function () {
    var children = $(this).find(opts.childrenSelector);
    if (!(opts.minWidth) || opts.minWidth < $window.width()) {
      var curHighest = 0;
      children.each(function () {
        var $el = $(this),
          elHeight = $el.height('auto').height();
        if (elHeight > curHighest) {
          curHighest = elHeight;
        }
      }).height(curHighest);
    } else {
      children.height('auto');
    }
  });
};
$.fn.eqHeights.defaults = {
  childrenSelector: '*',
  minWidth: ''
};

You can see this in action here: [email protected]

The plugin supports two options:

• childrenSelector: (Optional) The selector by which children that should get equal height are picked. Defaults to *, so everything in your parent is brought to equal height. Set to > to pick only direct children or something else to get the desired effect.
• minWidth: (Optional) The minimum viewport width above width the Plugin is working and calculates equal heights for the seleted children. Below their height is set to auto. This comes in handy if at some point your containers are laid out below each other and shouldn't have an equal height. Empty and inactive by default.

While this is working very good in all browser with which I tested, it is a very hackish solution, so maybe someone here can propose something better. I thought about copying the columns and their wrapper to hidden container in the document, but this isn't any less clean and produces a way bigger footprint.

Answer 2

My favorite trick to creating equal height columns that work almost everywhere is to set "overflow:hidden" on a wrapper div, and setting a huge positive bottom padding and a negative bottom margin on the columns themselves. Now the columns will always be the full height of the wrapper, whatever the height of the wrapper is.

Viz -

<div class="wrapper">
  <div class="column"> Column one content </div>
  <div class="column"> Column two content </div>
</div>
<style type="text/css">
.wrapper {
  overflow:hidden;
}
.column {
  margin-bottom: -2000px;
  padding-bottom: 2000px;
}
</style>

Here's a JSFiddle example - http://jsfiddle.net/yJYTT/