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です。

解決策は、CSS で定義された高さではなく、コンテンツの実際の高さを返すこの方法return $(this)[0].scrollHeightの代わりに使用することです。return $(this).height()

編集：

解決策は、実際には .block-content 内のすべての子の高さを計算し、その値を返すことです。ここでコードを編集しましたhttp://jsfiddle.net/3mVkn/12/

これにより、必要な結果が得られるはずです。

于 2012-07-19T11:50:01.633 に答える
0

関数のパラメーターが 1 つ不足していると思います.map()。.map() 私はここを見ました。

于 2012-07-19T11:49:26.127 に答える