jQuery height()在调整大小时未更改 [英] jQuery height() not changing on resize

问题描述

我以前从未遇到过这个问题，但是我似乎找不到解决方法，所以希望大家能帮帮我.

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/

FIX

嗯，这简直是愚蠢的.因为我正在设置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();
});

解决方案

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

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

解决方案实际上是计算.block-content内所有子级的高度，然后返回该值.我已经在这里 http://jsfiddle.net/3mVkn/12/

这应该为您提供所需的结果.

I never had this problem before but I can't seem to find the solution, so I hope you guys can help me out.

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

Basicly what this function does is check for the highest div and set the height of all selected div's to this height. This works fine. BUT it's a responsive design so when the user resize's his browser the content gets smaller and the div higher. So i added a resize event. The event is being fired but it's not changing the height. Any idea's why the resize is not changing the height?

Quick jsFiddle to show what happens: http://jsfiddle.net/3mVkn/

FIX

Hmm this was just plain stupid. Because I was setting the height() it was already fixed so all I had to do is just reset the height and it worked.

Updated code:

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

解决方案

This is not jQuery related but CSS. It is because once you have set the height of the .block-content to some value, after you resize the window the heights of those .block-content wont change because the heights are no longer set to auto but to some predefined value.

The solution is to use return $(this)[0].scrollHeight instead of return $(this).height() This way it will return the real height of the content, not the CSS defined height.

EDIT:

The solution is actually to calculate the height of all children inside the .block-content and then return that value. I've edited your code here http://jsfiddle.net/3mVkn/12/

This should give you the result needed.

这篇关于jQuery height()在调整大小时未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！