在响应/灵活布局中实现相等高度的列
我正在尝试在“响应式”网站上实现相同高度的列。
这意味着我正在使用媒体查询为一个网站提供多种布局，具体取决于设备和窗口的大小。
我有2列需要具有相同的高度。 布局修复后很容易实现。 我找到了几十个脚本，它运行良好。
但是，当我调整浏览器窗口的大小时， 生成的高度不会改变 。 因此，如果窗口较小，则列的高度保持与之前相同，并且列的内容溢出。 它很丑。
当我调整窗口大小时，有没有一种方法可以改变生成的高度？
注意：因为列中的内容我不能使用任何CSS技巧与背景图像等。 我真的真的需要两个列始终真正具有相同的高度。
这个问题已经很老了，但直到现在我还没有偶然发现这个问题。
一个工作的解决方案是一个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: '' }; 你可以在这里看到这个 ： demo@codepen.io
该插件支持两种选择：
-
childrenSelector:(可选）选择应该获得相同高度的子项的选择器。 默认为*，因此父级中的所有内容都达到相同的高度。 设置为>仅选择直接的孩子或其他东西以获得所需的效果。 -
minWidth:(可选）插件正在工作的宽度上方的最小视口宽度，并为选择的子节点计算相等的高度。 低于它们的高度设置为auto。 如果在某些时候你的容器布置在彼此之下并且不应该具有相同的高度，这就派上用场了。 默认为空和非活动状态。
虽然这在我测试的所有浏览器中都非常好用，但这是一个非常糟糕的解决方案，所以也许这里有人可以提出更好的建议。 我想过将列和它们的包装器复制到文档中的隐藏容器中，但这不是那么干净并且产生更大的占用空间。
创建几乎无处不在的高度相同列的我最喜欢的技巧是在包装div上设置“overflow：hidden”，并在列本身上设置一个巨大的正底部填充和负底部边距。 现在，无论包装器的高度如何，列始终是包装器的整个高度。
Viz –
Column one content Column two content
这是一个JSFiddle示例 – http://jsfiddle.net/yJYTT/
我为此写了一个小jQuery插件： http ： //github.com/jsliang/eqHeight.coffee/
在Chrome，Firefox和IE9上测试它，它适用于我。
这很棒！ 要使其在响应式布局内工作，您需要添加@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;} }
我甚至从边界function的答案中进一步破解了解决方案，以考虑响应式布局，其中面板在彼此之间回流。 通过检查每一个与第一个的偏移。顶部我能够检测到面板的方向并调整其.panel-body元素的大小或为回流面板指定自动.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
在我知道的问题之后的一段时间 – 但供参考 – 上次我必须解决这个问题我将这个jquery代码入侵到插件：
http://css-tricks.com/equal-height-blocks-in-rows/
很明显，$（window）.resize是关键部分 – 因为一旦重新resize，它将重新符合高度。 更进一步，我总是打算调整“反弹”列重新组合以帮助提高性能：
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
但从来没有那么远。
我有同样的问题。 经过一些研究，我选择了人造柱技术。 查看我撰写的关于如何使其在响应式设计中工作的博客文章。
使用人造柱技术响应全高（等高）柱