Question

我们创造了一个非常基本的相等高度功能，而后卫效果很好。但是，我们的任务是在调整窗口大小时调整列高度。它被实现为响应式，流畅的设计。但是那些不明白典型的响应用例并没有将你的浏览器拖到整个地方以接受特定断点的权力。

无论如何，在jsfiddle中获得了标记和js设置。 http://jsfiddle.net/J6uaH/3/

只是不能完全包围我的大脑将窗口调整大小元素添加到高处。任何人都可以提供的任何帮助将非常感激，如果有这样的事情，会给予超级英雄奖励积分！

Answer 1

为什么不直接向窗口的resize事件添加一个事件监听器来重新计算元素的高度？

但是因为你已经为元素设置了一个固定的高度，你需要重置两个元素的高度以获得新的最大尺寸。

尝试添加：

$(window).resize(function(){
    $('.group .module').css('height','auto');
    $('.group .module').equalHeight();
});

在firefox中工作。这基本上对每个窗口调整大小做了什么：

重置元素的高度，这意味着浏览器将根据其内容计算它
再次执行你的功能，使两个元素的高度相等

Answer 2

就个人而言，我根本不用JavaScript来解决这个问题。如果您愿意添加更多HTML，您可以单独使用CSS实现所需的视觉效果。

这是一个JSFiddle：http://jsfiddle.net/Z59eT/2/

基本策略：

将clear:both的元素添加到group模块的末尾---这允许组的高度等于两个模块中的较大者。
为组和模块div position:relative提供参与定位。
在每个模块之前添加特殊背景元素---这些元素将垂直增长以匹配组的大小，从而实现所需的列颜色。

我确信还有其他纯CSS方法可以解决这个问题。这是我想到的第一个。你真正的要求可能需要更细微的东西。

只要有可能，最好让浏览器完成工作。在这种情况下，如果可以的话，最好让浏览器处理它，而不是计算高度，因为浏览器本机功能的运行速度比解释的JS代码快几个数量级。

Answer 3

我必须自己做这件事。我过去曾经使用过setEqualHeight函数，但当有人正在疯狂地调整窗口大小时，我被“请求”使其工作。

room13的修复是关键。否则它只使用旧的设定高度。你显然也可以在DOM上调用相同的函数。我为窗口调整大小添加了一个延迟函数，所以你只能在完成时调用它，而不是经常调用它。

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);
});

Answer 4

问题是你获得了更大的高度，然后将它应用到盒子里。但是，当您再次进行比较时，您将再次比较原始框，但它是已更改的段落高度。

$.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();
    });

});

Answer 5

值得注意的是，这正是表格的作用。示例：http://jsfiddle.net/Z59eT/3/

具有一行和两个50％列的表将完全按照您的规范要求增长。

在窗口大小调整时使高度相等的函数可调整大小

5 个答案: