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

Question

我正在尝试在“响应式”网站上实现等高的列。

这意味着我使用媒体查询根据设备和窗口的大小为一个网站提供多种布局。

我有 2 列需要具有相同的高度。当布局固定时很容易实现。我发现有几十个脚本可以做到这一点，而且效果很好。

但是，当我调整浏览器窗口的大小时，生成的高度不会改变。所以如果窗口变小了，列的高度和以前一样，列的内容就会溢出。太丑了。

有没有办法在我调整窗口大小时改变生成的高度？

注意：由于列内的内容我不能对背景图像等使用任何 CSS 技巧。我真的真的需要两列在任何时候都真正具有相同的高度。强>

Answer 1

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

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

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

您可以在此处使用see this：demo@codepen.io

插件支持两种选择：

• childrenSelector：（可选）选择器选择应该获得相同高度的孩子。默认为*，因此您的父级中的所有内容都被带到相同的高度。设置为 > 以仅选择直接子级或其他内容以获得所需的效果。
• minWidth：（可选）插件工作的最小视口宽度高于宽度，并为选定的子项计算相等的高度。低于他们的高度设置为auto。如果在某些时候您的容器被布置在彼此下方并且不应该具有相等的高度，这会派上用场。默认为空且不活动。

虽然这在我测试过的所有浏览器中运行良好，但这是一个非常老套的解决方案，所以也许这里有人可以提出更好的建议。我曾考虑将列和它们的包装复制到文档中的隐藏容器中，但这并没有降低清洁度并且会产生更大的占用空间。

Answer 2

我从边界函数的答案中进一步破解了解决方案，以考虑面板相互重叠的响应式布局。 通过对照第一个的 offset.top 检查每一个，我能够检测到面板的方向并调整其 .panel-body 元素的大小或为回流的面板分配自动高度。

(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();

此处示例：http://bootply.com/render/104399

Answer 3

这很好用！要使其在响应式布局中工作，您需要添加 @ 媒体查询，以便它仅用于“大于”断点的屏幕尺寸。否则，侧边栏颜色会向下延伸到平板电脑和手机视图上的主要内容。以下是它在响应式样式表中的外观：

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

Answer 4

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

在 Chrome、Firefox 和 IE9 上进行了测试，对我有用。

Answer 5

我遇到了同样的问题。经过一番研究，我选择了仿柱技术。查看我写的这篇博文，了解如何使其在响应式设计中发挥作用。

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

Answer 6

在我知道这个问题之后的一段时间——但作为参考——上次我不得不解决这个问题时，我将这个 jquery 代码破解为一个插件：

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

显然 $(window).resize 是关键部分 - 因为一旦重新调整大小，它将重新符合高度。更进一步，我一直想研究“去弹跳”列重新整合以帮助提高性能：

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

但从未走到那一步。

Answer 7

创建几乎在任何地方都可以使用的等高列，我最喜欢的技巧是在包装 div 上设置“溢出：隐藏”，并在列本身上设置巨大的正底部填充和负底部边距。现在，列将始终是包装器的全高，无论包装器的高度是多少。

即-

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