jQuery height() 在调整大小时不会改变

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 会变高。所以我添加了一个调整大小事件。该事件正在被触发，但它没有改变高度。知道为什么调整大小不会改变高度吗？

快速 jsFiddle 显示发生了什么：http://jsfiddle.net/3mVkn/

修复

嗯，这简直太愚蠢了。因为我设置了 height()，所以它已经被修复了，所以我所要做的就是重置高度，它就可以工作了。

更新代码：

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

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

Answer 2

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

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

编辑：

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

这应该会给你所需的结果。