javascript - レスポンシブ デザイン: ウィンドウのサイズ変更時に Div の高さが更新されない

Question

私が取り組んでいるレスポンシブデザインのウェブサイト。

私は基本的にタブ付きのコンテンツを持っています。タブは左側 (垂直) に、コンテンツは右側にあります。

コンテンツの幅を変更する小さな画面サイズのメディア クエリがあります。そのため、コンテンツを含む記事の幅が小さい場合、高さが自動的に増加します。これは予想されることであり、まさに私が望んでいることです。

すべての記事の高さをチェックし、他のすべての記事を「最も高い」記事の高さに一致させるスクリプトがあります。(誰かが別のタブをクリックするたびにボックスのサイズを変更したくないため、すべてのタブの高さを設定します)

問題は次のとおりです。

ウィンドウでサイズ変更イベントが発生すると、同じ関数を実行して高さを計算し、記事をその高さに一致させますが、返される記事の高さ$el.height();は以前のウィンドウ サイズ (サイズ変更イベントが発生する前) と同じです。

これがなぜなのか知っている人はいますか？

以下のコード サンプルでは、​​これらのスニペットがより大きなオブジェクトとアプリケーションの一部であるため、いくつかの奇妙な点に気付くかもしれません。

function calculateHeight() {
    $el.find('article').each(function() {
        // height does not work correctly when display is none
        var elHeight = $(this).css({
            position: 'absolute',
            visibility: 'hidden',
            display: 'block'
        }).height();


        if (_height < elHeight) { _height = elHeight; }

        // Ok hide it normally again
        $(this).css({
            position: 'relative',
            visibility: 'visible',
            display: 'none'
        });

        elHeight = null;
    });
}

// resize event
$(window).resize(function() {
    /* FIXME: There is a bug here, resize is not working correctly */
    _height = 0;
    calculateHeight();
    setCalculatedSliderHeight();
});