在响应/灵活布局中实现相等高度的列 [英] achieving equal height columns in a responsive / flexible layout

问题描述

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

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

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

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

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.

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

注意：因为列我不能使用任何CSS技巧与背景图像等。我真的真的需要两个列始终具有相同的高度。

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.

推荐答案

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

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

一个工作的解决方案是一个jQuery插件，它可以将列的高度设置为'auto'，测量哪一个最高并设置列达到那个高度。与此类似：

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

你可以请参阅此处： [e-mail]

该插件支持两种选择：

• childrenSelector :(可选）选择应该获得相同高度的子项的选择器。默认为 * ，因此父级中的所有内容都达到相同的高度。设置为> 以仅选择直接子项或其他内容以获得所需效果。


• minWidth :(可选）插件正在工作的宽度上方的最小视口宽度，并为选择的子节点计算相等的高度。低于它们的高度设置为 auto 。如果在某些时候你的容器布置在彼此之下并且不应该具有相同的高度，这就派上用场了。默认情况下为空和非活动状态。

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

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

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.

这篇关于在响应/灵活布局中实现相等高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！