javascript 在响应式/灵活布局中实现等高的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6041654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
achieving equal height columns in a responsive / flexible layout
提问by FlowerMountain
I'm trying to achieve equal height columns on a 'responsive' website.
我正在尝试在“响应式”网站上实现等高的列。
That means I'm using media queriesto provide several layouts for one website depending on the size of the device and window.
这意味着我正在使用媒体查询为一个网站提供多种布局，具体取决于设备和窗口的大小。
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.
我有 2 列需要具有相同的高度。布局固定后很容易实现。我找到了几十个脚本，而且效果很好。
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.
但是，当我调整浏览器窗口的大小时，生成的高度不会改变。因此，如果窗口较小，则列的高度保持不变，列的内容会溢出。它很丑。
Is there a way that generated height could change as I resize the window ?
当我调整窗口大小时，生成的高度有没有办法改变？
Note : because of what's inside the columns I cannot use any CSS trickwith backgrounds images etc. I really REALLY need both columns to truly have the same height at all times.
注意：由于列内的内容，我不能对背景图像等使用任何 CSS 技巧。我真的需要两列始终真正具有相同的高度。
回答by bfncs
This question is already pretty old, but I didn't stumble upon a good solution for this myself until now.
这个问题已经很老了，但直到现在我自己才偶然发现了一个很好的解决方案。
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:
一个可行的解决方案是一个 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: ''
};
You can see thisin action here: [email protected]
你可以在这里看到这个：[email protected]
The plugin supports two options:
该插件支持两个选项：
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 toauto. 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.
childrenSelector：（可选）选择应该获得相同高度的孩子的选择器。默认为*，因此您的父级中的所有内容都具有相同的高度。设置为>仅选择直接子项或其他内容以获得所需的效果。minWidth：（可选）插件正在工作的宽度以上的最小视口宽度，并为选定的子项计算相等的高度。低于它们的高度设置为auto。如果在某些时候你的容器被放置在彼此下方并且不应该具有相同的高度，这会派上用场。默认为空且不活动。
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.
虽然这在我测试过的所有浏览器中都非常有效，但它是一个非常黑客的解决方案，所以也许这里有人可以提出更好的建议。我想过将列及其包装器复制到文档中的隐藏容器中，但这并没有减少干净，并且会产生更大的占用空间。
回答by Anupam Jain
My favorite trick to creating equal height columns that work almost everywhere is to set "overflow:hidden" on a wrapper div, and setting a huge positive bottom padding and a negative bottom margin on the columns themselves. Now the columns will always be the full height of the wrapper, whatever the height of the wrapper is.
我最喜欢创建几乎适用于所有地方的等高列的技巧是在包装器 div 上设置“溢出：隐藏”，并在列本身上设置一个巨大的正底部填充和负底部边距。现在，无论包装纸的高度是多少，列将始终是包装纸的全高。
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>
Here's a JSFiddle example - http://jsfiddle.net/yJYTT/
这是一个 JSFiddle 示例 - http://jsfiddle.net/yJYTT/
回答by jsliang
I wrote a small jQuery plugin for this: http://github.com/jsliang/eqHeight.coffee/
我为此编写了一个小型 jQuery 插件：http: //github.com/jsliang/eqHeight.coffee/
Tested it on Chrome, Firefox and IE9 and it works for me.
在 Chrome、Firefox 和 IE9 上对其进行了测试，它对我有用。
回答by Artisan Web and Print
This works great! To make it work inside of a responsive layout you'll need to add the @ media query so it's only used on screen sizes "larger than" your break point. Otherwise, the sidebar color extends down into the main content on the tablet and phone views. Here's how it looks in a responsive stylesheet:
这很好用！要使其在响应式布局中工作，您需要添加 @ 媒体查询，以便它仅用于“大于”断点的屏幕尺寸。否则，侧边栏颜色会向下延伸到平板电脑和手机视图上的主要内容。这是它在响应式样式表中的外观：
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;}
}
回答by Andy Gee
I hacked the solution even further from boundaryfunctions's answer to take into consideration responsive layouts where the panels reflow above each other.
By checking each one against the first one's offset.top I was able to detect the orientation of the panels and resize their .panel-bodyelement or assign an auto heigh for reflowed panels.
我从边界函数的答案中进一步破解了解决方案，以考虑面板在彼此上方重排的响应式布局。通过根据第一个的 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();
Example here: http://bootply.com/render/104399
这里的例子：http: //bootply.com/render/104399
回答by Andrew Parker
Some time after the question I know - but for reference - last time I had to solve this problem I hacked this jquery code to a plugin:
在我知道这个问题之后的一段时间 - 但作为参考 - 上次我不得不解决这个问题时，我将此 jquery 代码破解为一个插件：
http://css-tricks.com/equal-height-blocks-in-rows/
http://css-tricks.com/equal-height-blocks-in-rows/
obviously $(window).resize is the crucial part - as it'll re-conform the heights once the re-size has taken place. Taking it a step further I always meant to look into 'de-bouncing' the column reconform to help with performance:
显然 $(window).resize 是关键部分 - 因为一旦重新调整大小，它就会重新符合高度。更进一步，我总是打算研究“去弹跳”列重新调整以帮助提高性能：
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
but never got that far.
但从来没有那么远。
回答by Sylvain
I had the same problem. After some research I selected the faux column technique. Check this blog post that I wrote on how to make it work in a responsive design.
我有同样的问题。经过一番研究，我选择了人造柱技术。查看我写的关于如何使其在响应式设计中工作的这篇博文。
Responsive full height (equal height) columns using the faux columns technique
