-1

この「 rightContent」divのみにスクロールを与えるために、メインのdivコンテナに高さを割り当てようとしています。

私がやっているのは、他のすべての高さを見つけDIVて、それらの DIV の高さを「」高さで差し引いて、window高さをメイン div「rightContent」に与えることだけです。

しかし、問題が発生しています。「 .tabstripContainer 」divを除くすべての「DIV」の高さを取得します。これは動的DIVであり、実行時に生成されます。

「 .ready() 」のページの最後に以下のコードを追加しましたが、コードを実行すると、「 tabstripContainer = $('.tabstripContainer').outerHeight();」に対して「null」が返されます

コードを実行したときの出力は次のとおりです。

ここに画像の説明を入力

================================================== =========

しかし、ブラウザ コンソールでコードを実行すると、" tabstripContainer = $('.tabstripContainer').outerHeight();" の正しい値も得られます。"

ブラウザ CONSOLE でコードを実行したときの出力は次のとおりです。 ここに画像の説明を入力

================================================== ================== これが私のコードです:

$(document).ready(function() {
    // -----------------------------------------------------
    // 100% height fill for splitter main window and panes [Master layout]
    // -----------------------------------------------------
    var bHeight = $('body').height(),
        wHeight = $(window).height(),
        headerHeight = $('header').outerHeight(),
        blueHeader = $('.blueHeader').outerHeight(),
        greyHeader = $('.greyHeader').outerHeight(),
        tabstripContainer = $('.tabstripContainer').outerHeight();

    changepush();
    $(window).resize(function() {
        wHeight = $(window).height();
        changepush();
    });

    function changepush() {
        if (wHeight >= bHeight) {
            var rightContent = wHeight - headerHeight - blueHeader - greyHeader - tabstripContainer;
            $('.rightContent').height(rightContent);

            alert("bHeight" + " > " + bHeight + " wHeight" + " > " + wHeight + " headerHeight" + " > " + headerHeight + " blueHeader" + " > " + blueHeader + " greyHeader" + " > " + greyHeader + " tabstripContainer" + " > " + tabstripContainer + " rightContent" + " > " + rightContent);
        }
    }
});

提案してください！

4

2 に答える 2

1

私はコメントするのに十分な評判を持っていないので、これを答えとして提供しなければなりませんでした.

$(document).ready の代わりに $(window).load を使ってみましたか? 前者は、追加のページ アセット (画像など) が読み込まれたときに発生しますが、後者は DOM の準備ができたときにトリガーされます。

于 2015-05-04T22:16:59.897 に答える
1

実行時にコンテンツを作成している場合は、これが発生するまで待つ必要があります。 document.readyブラウザーがすべての DOM の解析を終了した直後に、他のスクリプト (ajax 呼び出しなど) の前に起動されます。

考えられる解決策の 1 つは、 を使用して呼び出しを延期するか、コンテンツが表示されたら関数を呼び出すことです。change push()setTimeout

もう 1 つの解決策は、div コンテンツが読み込まれた後に独自のイベント (つまり、「contentLoaded」) を発生させることです。

window.loadの代わりにdocument.ready、すべての外部要求 (画像、フレームなど) が完了した後にトリガーされるイベントを使用してみることができます。

setTimeout リファレンス: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

jQuery カスタム イベント: https://learn.jquery.com/events/introduction-to-custom-events/

于 2015-05-04T22:21:53.623 に答える