在窗口大小调整时使高度相等的函数可resize
我们创造了一个非常基本的相等高度function，而后卫效果很好。 但是，我们的任务是在调整窗口大小时调整列高度。 它被实现为响应式，流畅的设计。 但是，那些不明白典型的响应用例的function并没有将浏览器拖到整个地方以接受特定的断点。
无论如何，在这里得到jsfiddle的标记和js设置。 http://jsfiddle.net/J6uaH/3/
只是不能完全包围我的大脑将窗口resize元素添加到高度。 如果有这样的事情，任何人都可以提供的任何帮助将非常感激，并会给予超级英雄奖励积分！
为什么不直接向窗口的resize事件添加一个事件监听器来重新计算元素的高度？
但是因为您已经为元素设置了固定高度，所以需要重置两个元素的高度以获得新的最大大小。
尝试添加：
$(window).resize(function(){ $('.group .module').css('height','auto'); $('.group .module').equalHeight(); }); 在firefox工作。 这基本上对窗口的每个resize做了什么：
- 重置元素的高度，这意味着浏览器将根据其内容计算它
- 再次执行你的function，使两个元素的高度相等
就个人而言，我根本不解决这个问题就解决了这个问题。 如果您愿意添加更多HTML，您可以单独使用CSS实现所需的视觉效果。
这是一个JSFiddle： http ： //jsfiddle.net/Z59eT/2/
基本策略：
- 添加一个带有
clear:both的元素clear:both到模块group的末尾—这允许组的高度等于两个模块中的较大者。 - 给组和模块divs
position:relative以便他们参与定位。 - 在每个模块之前添加特殊背景元素—这些元素将垂直增长以匹配组的大小，实现所需的列颜色。
我确信还有其他纯CSS方法可以解决这个问题。 这是我想到的第一个。 您的真实需求可能需要更细微的东西。
只要有可能，最好让浏览器完成工作。 在这种情况下，如果可以的话，最好让浏览器处理它，而不是计算高度，因为浏览器本机function将比解释的JS代码快几个数量级。
我必须自己做这件事。 我过去曾经使用过setEqualHeight函数，但当有人像疯了一样调整窗口大小时，我被“请求”使它工作。
room13的修复是关键。 否则它只使用旧的设定高度。 你显然也可以在DOM上调用相同的函数。 我为窗口resize添加了一个延迟函数，所以你只在完成后调用它，而不是经常调用它。
jQuery的：
function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } var delay = (function(){ var timer = 0; return function(callback, ms){ clearTimeout (timer); timer = setTimeout(callback, ms); }; })(); $(window).resize(function() { delay(function(){ $('.yourSelector').css('height','auto'); //solve for all you browser stretchers out there! setEqualHeight($('.yourSelector')); }, 500); });
问题是你获得了更大的高度然后将它应用到盒子里。 但是，当您再次进行比较时，您将再次比较原始框，但它是已更改的段落高度。
$.fn.equalHeight = function() { var maxHeight = 0; return this.each(function(index, box) { var boxHeight = $(box).height(); maxHeight = Math.max(maxHeight, boxHeight); }).parent().height(maxHeight); }; $(document).ready(function() { $('.group .module p').equalHeight(); $(window).resize(function () { $('.group .module p').equalHeight(); }); });
值得注意的是，这正是表所做的。 示例： http ： //jsfiddle.net/Z59eT/3/
具有一行和两个50％列的表将完全按照您的规格要求增长。