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会变高.所以我添加了一个resize事件.事件正在被解雇,但它没有改变高度.任何想法都是为什么调整大小不会改变高度？

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

固定

嗯,这简直太愚蠢了.因为我设置了高度()它已经固定了所以我所要做的只是重置高度并且它起作用.

更新的代码:

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/

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