4

不久前，我们创建了一个非常基本的等高函数，效果很好。但是，我们的任务是在调整窗口大小时调整列高。它被实施为响应式、流畅的设计。但是当权者不理解典型的响应式用例并没有将您的浏览器拖到所有地方以接受特定的断点。

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

只是不能完全围绕将窗口调整大小元素添加到高度上。任何人可以提供的任何帮助都将不胜感激，如果有这样的事情，任何人都会给超级英雄加分！

4

5 回答 5

12

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

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

尝试添加：

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

在火狐工作。这基本上对窗口的每次调整大小都有作用：

  1. 重置元素的高度，这意味着浏览器将根据其内容计算它
  2. 再次执行您的函数以使两个元素的高度相等
于 2012-10-15T20:25:56.557 回答
3

就个人而言，我完全不用 JavaScript 就可以解决这个问题。如果你愿意多加一点 HTML，只用 CSS 就可以达到想要的视觉效果。

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

基本策略：

  1. clear:both在模块的末尾添加一个元素group--- 这允许组的高度等于两个模块中的较大者。
  2. 给组和模块 divposition:relative以便他们参与定位。
  3. 在每个模块之前添加特殊的背景元素——这些元素将垂直增长以匹配组的大小，实现所需的列颜色。

我确信还有其他纯 CSS 方法可以解决这个问题。这只是第一个想到的。您的实际需求可能需要更多细微差别的东西。

只要有可能，最好让浏览器完成这项工作。在这种情况下，与其计算高度，不如让浏览器处理它，因为浏览器的原生功能将比解释的 JS 代码快几个数量级。

于 2012-10-15T20:45:43.567 回答
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);
});
于 2013-01-30T21:45:01.713 回答
1

问题是您获得了更大的高度，然后将其应用于盒子。但是，当您再次比较时，您正在再次比较原始框，但是它是段落高度发生了变化。 

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

});
于 2012-10-15T20:22:50.167 回答
-2

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

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

于 2012-10-15T20:49:00.783 回答