我正在尝试在“响应式”网站上实现等高的列。
这意味着我正在使用 媒体查询 根据设备和窗口的大小为一个网站提供多种布局。
我有 2 列需要具有相同的高度。 布局固定后很容易实现。我找到了几十个脚本，而且效果很好。
但是，当我调整浏览器窗口的大小时， 生成的高度不会改变 。因此，如果窗口较小，则列的高度保持不变，列的内容会溢出。它很丑。
有没有办法在我调整窗口大小时改变生成的高度？
注意:由于 列中的内容，我无法将任何 CSS 技巧 与背景图像等一起使用。 我真的真的需要两列始终真正具有相同的高度。
最佳答案
这个问题已经很老了，但直到现在我自己才发现了一个很好的解决方案。
一个可行的解决方案是一个 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:[email protected]
该插件支持两个选项:
childrenSelector :(可选)选择应该获得相同高度的 child 的选择器。默认为 * ，因此您的父级中的所有内容都具有相同的高度。设置为 > 以仅选择直接子项或其他内容以获得所需的效果。 minWidth :(可选)插件工作宽度以上的最小视口(viewport)宽度，并为选定的子项计算相等的高度。低于它们的高度设置为 auto 。如果在某些时候你的容器被放置在彼此下方并且不应该具有相同的高度，这会派上用场。默认为空且不事件。 虽然这在我测试过的所有浏览器中都非常有效，但它是一个非常hackish 的解决方案，所以也许这里有人可以提出更好的建议。我想过将列及其包装器复制到文档中的隐藏容器中，但这并没有减少干净，并且会产生更大的占用空间。