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

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

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

编辑:

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

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