Question

我之前从未遇到过这个问题，但我似乎无法找到解决方案，所以我希望你们能帮助我。

的jQuery

function setTheHeight() {

    if( $('#main.level1 .block.attention .block-content').length ) {
        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
            function() {
                return $(this).height();
            }
        ));
        console.log(maxHeight);
        $('#main.level1 .block.attention .block-content').height(maxHeight);
    }
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});

这个函数的基本功能是检查最高div并将所有选定div的高度设置为此高度。这很好用。但它是一个响应式设计，所以当用户调整浏览器时，内容会变小，div会更高。所以我添加了一个resize事件。事件正在被解雇，但它没有改变高度。任何想法都是为什么调整大小不会改变高度？

快速jsFiddle以显示发生的情况：http://jsfiddle.net/3mVkn/

FIX

嗯，这简直太愚蠢了。因为我设置了高度（）它已经被修复了所以我所要做的只是重置高度并且它有效。

更新的代码：

function setTheHeight() {

    if( $('#main.level1 .block.attention .block-content').length ) {

        //Reset height
        $('#main.level1 .block.attention .block-content').height('auto');

        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
            function() {
                return $(this).height();
            }
        ));
        console.log(maxHeight);
        $('#main.level1 .block.attention .block-content').height(maxHeight);
    }
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});

Answer 1

这不是jQuery相关的，而是CSS。这是因为一旦你将.block-content的高度设置为某个值，在调整窗口大小后，那些.block-content的高度就不会改变，因为高度不再设置为auto而是设置为某些预定义值。

解决方案是使用return $(this)[0].scrollHeight代替return $(this).height() 这样它将返回内容的实际高度，而不是CSS定义的高度。

修改

解决方案实际上是计算.block-content中所有子节点的高度，然后返回该值。我在这里编辑了您的代码http://jsfiddle.net/3mVkn/12/

这应该给你所需的结果。

Answer 2

我认为您缺少.map()函数的一个参数。我看了.map() here。

jQuery height（）在调整大小时不会改变

2 个答案: