achieving equal height columns in a responsive / f

问题:

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.

回答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: [e-mail]

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.

回答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/

回答3:

I wrote a small jQuery plugin for this: http://github.com/jsliang/eqHeight.coffee/

Tested it on Chrome, Firefox and IE9 and it works for me.

回答4:

This works great! To make it work inside of a responsive layout you'll need to add the @ media query so it's only used on screen sizes "larger than" your break point. Otherwise, the sidebar color extends down into the main content on the tablet and phone views. Here's how it looks in a responsive stylesheet:

 div.wrapper {
    overflow:hidden;
}
.column {
    background-color: rgba(193,204,164,.5);
    padding:2%;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
@media screen and (max-width:960px){
.column {padding-bottom:2%; margin-bottom:0px;}
}

回答5:

I hacked the solution even further from boundaryfunctions's answer to take into consideration responsive layouts where the panels reflow above each other. By checking each one against the first one's offset.top I was able to detect the orientation of the panels and resize their .panel-body element or assign an auto heigh for reflowed panels.

(function($) {
    $.fn.eqHeights = function() {
        var el = $(this);
        if (el.length > 0 && !el.data('eqHeights')) {
            $(window).bind('resize.eqHeights', function() {
                el.eqHeights();
            });
            el.data('eqHeights', true);
        }
        var panels = el.find(".panel-body");
        var fistoffset = panels.first().offset();
        var curHighest = 0;
        return panels.each(function() {
            var thisoffset = $(this).offset();
            var elHeight = $(this).height('auto').height();
            if(thisoffset.top==fistoffset.top){
                if (elHeight > curHighest) {
                    curHighest = elHeight;
                }
            }else{
                curHighest = "auto";
            }
        }).height(curHighest);
    };
}(jQuery));

$('.match_all').eqHeights();

Example here: http://bootply.com/render/104399

回答6:

Some time after the question I know - but for reference - last time I had to solve this problem I hacked this jquery code to a plugin:

http://css-tricks.com/equal-height-blocks-in-rows/

obviously $(window).resize is the crucial part - as it'll re-conform the heights once the re-size has taken place. Taking it a step further I always meant to look into 'de-bouncing' the column reconform to help with performance:

http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

but never got that far.

回答7:

I had the same problem. After some research I selected the faux column technique. Check this blog post that I wrote on how to make it work in a responsive design.

Responsive full height (equal height) columns using the faux columns technique