6

我以前从来没有遇到过这个问题，但我似乎找不到解决方案，所以我希望你们能帮助我。

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

2 回答 2

4

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

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

编辑：

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

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

于 2012-07-19T11:50:01.633 回答
0

我认为您缺少一个.map()功能参数。我看了.map() 这里。

于 2012-07-19T11:49:26.127 回答