Question

我正试图在“响应式”网站上实现相同的高度列。

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

我有2列需要具有相同的高度。布局修复后很容易实现。我找到了几十个脚本来完成它并且运行良好。

但是，当我调整浏览器窗口大小时，生成的高度不会改变。因此，如果窗口较小，则列的高度保持与之前相同，并且列的内容溢出。这太丑了。

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

注意：因为列我不能使用任何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: ''
};

您可以在此see this采取行动：demo@codepen.io

该插件支持两个选项：

childrenSelector :(可选）选择应获得相同高度的子项的选择器。默认为*，因此父级中的所有内容都会达到相同的高度。设置为>以仅选择直接孩子或其他东西以获得所需效果。
minWidth :(可选）插件正在工作的宽度上方的最小视口宽度，并为选择的子节点计算相等的高度。低于它们的高度设置为auto。如果在某些时候你的容器布置在彼此之下并且不应该具有相同的高度，这就派上用场了。默认为空和非活动状态。

虽然这在我测试的所有浏览器中都非常好用，但这是一个非常糟糕的解决方案，所以也许有人可以提出更好的建议。我想过将列和它们的包装器复制到文档中的隐藏容器中，但这不是那么干净，并且会产生更大的占用空间。

Answer 2

我最喜欢创建几乎无处不在的相同高度列的技巧是在包装div上设置“overflow：hidden”，并在列本身上设置一个巨大的正底部填充和负底部边距。现在，无论包装器的高度如何，列始终是包装器的整个高度。

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>

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

Answer 3

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

在Chrome，Firefox和IE9上测试过，它对我有用。

Answer 4

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

 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 5

我甚至从边界功能的答案中进一步破解了解决方案，以考虑响应式布局，其中面板彼此重新流动。通过检查每个人对着第一个偏移。我能够检测到面板的方向并调整其.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 6

在我知道的问题之后的一段时间 - 但供参考 - 上次我必须解决这个问题我将这个jquery代码破解为插件：

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

显然$（window）.resize是关键部分 - 因为一旦重新调整大小，它将重新符合高度。更进一步，我总是打算调整“反弹”列重新组合以帮助提高性能：

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

但从来没有那么远。

Answer 7

我遇到了同样的问题。经过一些研究，我选择了人造柱技术。查看我写的关于如何使其在响应式设计中工作的博客文章。

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

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

7 个答案: