jQuery Mobile：完全ロード時にDOMを修正して高さを100％にする

Question

jQuery Mobileページのコンテンツ領域を拡大して、ページがビューポートの100％を満たすようにしたい（header + content + footer = 100％ ）。私はDOMが完全にロードされているので、すべてのdivの高さを持っているので、高さの整列を行わなければならないと思って、次にthisのような何かをすることができます。

jQuery MobileがpageInit and not $(document).readyを使用すると主張しています。 Unforunatelaty DOMは、それが79pxである私に告げる）私は$（ドキュメント）.readyで同じコードを（使用すると高さが0である私に語っpageInitが

var header = $("div[data-role='header']") 
console.log(header.height()); 

として呼び出されたときに完全にロードされていないようです。

アラインメントを作成するベストプラクティスは何ですか？

編集：

Hereは私のページの基本的な構造を示しているjsFiddleです。私はキャンバスがヘッダーとフッターの間のスペース全体を埋めるようにしたい。

Answer 1

私はあなたの場合、header = []と推測します。しかし、私は問題を理解していないか、またはJavaScriptが必要な理由を理解できません。あなたは簡単なCSSでできませんか？ロードする

.header{height:20%} 
.content{height:60%} 
.footer{height:20%} 

または

Answer 2

似たようなあなたは、画像（または他の外部の資産）を待っているなら、あなたは、要素/資産に直接loadイベントハンドラをバインドしたりwindow.loadを待ついずれかの必要があります資産のディメンションが正しいようにします。

アセットを指定することもできます。たとえば、画像の場合は300pxで、200pxとなります。アトリビュートまたはCSSで設定します。この方法では、window.loadイベントが発生する前に正しい次元を持つことができ、これはAJAX経由でページがDOMに持ち込まれたときにwindow.loadが発生するのを待つことができないため、jQuery Mobileのページイベントでうまく機能します。

1.1.0 RC1より古いバージョンを使用している場合は、チェックアウトすることをお勧めします。見た目にはCSSの固定フッターがあり、ページは常に100％の高さに見えるようにしてください。 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download

Answer 3

ヘッダーとフッターの間のスペースを埋めることを目標とする場合は、高さがdata-role="content"になると考えていますか？

Answer 4

まず、あなたのページの「pageshowの」イベントを作成します。 （それは後者の場合には、あなたが高さを取得することはできませんので、「pageshowの」イベントではなく、「pagebeforeshow」である必要があります - ページが隠されている）

このイベントインサイド

// bind "pageshow" event to your page 
$("#PageID").live("pageshow", function (event, data) { 
    // do something...  
}); 

に、あなたのヘッダー、フッター、ページサイズをご確認ください（パディングと&余白）： のような何か：

var header_height = $("div[data-role=header]").height(); 
var footer_height = $("div[data-role=footer]").height(); 
var page_height = $("div[data-role=page]").height(); 

その後、キャンバスの新しいサイズを計算し、設定します。

$("#MyCanvas").css({"height":page_height - (header_height + footer_height)}); 

全体のコード例：いくつかの簡単なCSSは大丈夫だろうが、私は、ヘッダー、フッター、およびコンテンツのdivのため％にインラインCSSを使用した場合、高さが適用され、コンテンツの高さdoesntのdoes notのコースの

// bind "pageshow" event to your page 
    $("#PageID").live("pageshow", function (event, data) { 
     var header_height = $("div[data-role=header]").height(); 
     var footer_height = $("div[data-role=footer]").height(); 
     var page_height = $("div[data-role=page]").height(); 

     $("#MyCanvas").css({"height":page_height - (header_height + footer_height)});  
    });