在响应/灵活的布局中实现等高列

Question

我正试图在一个“响应”网站上实现等高列。

这意味着我使用媒体查询为一个网站提供几个布局，这取决于设备和窗口的大小。

我有两个列，需要有相同的高度。，很容易实现时，布局是固定的。我找到了几十个脚本来做这件事，而且效果很好。

然而，当我调整浏览器窗口的大小时，生成的高度不会改变。因此，如果窗口较小，则列的高度与以前相同，且列的内容溢出。太难看了。

，当我调整窗口的大小时，是否有一种方法可以改变生成的高度?

注意:由于列中的内容，我不能使用任何带有背景、图像等CSS技巧的。，我真的需要这两列在任何时候都有相同的高度。

Answer 1

这个问题已经很老了，但直到现在我自己还没有找到一个很好的解决办法。

一个可行的解决方案是一个jQuery插件，它可以将列的高度设置为“auto”，测量哪一个是最高的，并将列设置为该高度。与此类似的东西：

$.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: ''
};

您可以在这里使用看看这个：demo@codepen.io

该插件支持两个选项：

• childrenSelector：(可选)应该得到同等高度的孩子的选择器被选中。默认为*，因此您的父级中的所有内容都会被带到相同的高度。设置为>，只选择直接的子级或其他东西来获得所需的效果。
• minWidth：(可选)插件宽度以上的最小视口宽度正在工作，并为选择的孩子计算等高。低于它们的高度设置为auto。如果在某种程度上，你的容器被放置在彼此下面，并且不应该有一个相同的高度，这是有用的。默认情况下为空和不活动。

虽然这在我测试过的所有浏览器中都很好，但这是一个非常麻烦的解决方案，所以这里的人也许可以提出更好的建议。我考虑过将列及其包装器复制到文档中的隐藏容器中，但这并不是不太干净，而且会产生更大的占用空间。

Answer 2

我最喜欢的创建几乎在任何地方都能工作的等高列的技巧是在包装器div上设置“overflow:隐含”，并在列本身上设置一个巨大的正底部填充和一个负的底部边距。现在，不管包装器的高度是什么，列都将是包装器的全部高度。

即-

<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>

下面是一个JSFiddle示例- http://jsfiddle.net/yJYTT/

Answer 3

我为此编写了一个小的jQuery插件：http://github.com/jsliang/eqHeight.coffee/

在Chrome，火狐和IE9上测试了它，它对我很有用。