0

私は現在、フルスクリーンのウェブサイトに取り組んでいます。メインのコンテンツ セクション、ヘッダー、およびナビゲーション バーがあります。私の目標は、高さを固定したヘッダーとナビゲーション、および動的に適合するコンテンツを作成することです。私は数日間プロジェクトに取り組んできましたが、サイズ変更アルゴリズムは今までうまく機能していました:

var resizeBg = function() 
{
    var newHeight = $(window).innerHeight();

    console.log($(window).innerHeight());

    console.log(newHeight);

    newHeight -= $("#navBar").height();

    console.log(newHeight);

    newHeight -= $("#mainHeader").height();

    console.log(newHeight);

    $("#mainContent").css("height", newHeight + "px");
};

$(window).load(resizeBg);

$(window).resize(resizeBg);

ログには次のように記載されています。

21
21
-45
-128

現在、Mozilla Firefox 23.0.1 を使用すると、メイン コンテンツが消えるだけです。他のブラウザでは、すべて正常に動作します。newHeightデバッグを介して、それがマイナスになることがわかりました。さらにデバッグした後、次の結果に非常に混乱しました。 Firebug のデバッグ サーフェスのスクリーンショット

図に示すように、の値newHeightが! また、ウィンドウ サイズを変更しても値は変化しないようです (ただし、変化します)。21innerHeight62921629

このエラーを達成するために何をしたのか、この問題にどのようにアプローチするのかわかりません。

4

1 に答える 1

0

innerHeight の jQuery ページには、「このメソッドはウィンドウ オブジェクトとドキュメント オブジェクトには適用できません。これらのオブジェクトには、代わりに .height() を使用してください」と書かれています。— リスター氏

リスター氏は正しい。コードを次のように変更しました。

var resizeBg = function() 
{
    var newHeight = window.innerHeight - $("#navBar").height() - $("#mainHeader").height());

    $("#mainContent").css("height", newHeight + "px");
}
于 2014-03-05T10:51:46.753 に答える