jQuery Mobile: Ändern DOM wenn voll geladen, um Seite 100% in Höhe

Question

Ich möchte den Inhaltsbereich in einer jQuery Mobile Seitenbereich machen, so dass die Seite füllt 100% des Ansichtsfensters (Header + Inhalt + Fußzeile = 100%). Ich würde annehmen, dass ich die Höhenausrichtungen tun muss, wenn das DOM voll geladen ist, also habe ich die Höhen aller divs und dann kann ich etwas ähnliches wie this tun.

jQuery Mobile behauptet zu verwenden pageInit and not $(document).ready. Unforunatelaty das DOM scheint nicht vollständig geladen werden, wenn Pageinit als

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

genannt wird, sagt mir die Höhe 0. Wenn ich den gleichen Code in $ (document) .ready() verwenden, es mir sagt, es ist 79px.

Also, was ist die beste Praxis, um die Ausrichtungen zu machen?

Edit:

Here ist ein jsFiddle, die die grundlegende Struktur meiner Seite zeigt. Ich möchte, dass die Zeichenfläche den gesamten Abstand zwischen Kopfzeile und Fußzeile ausfüllt.

Answer 1

Ich denke, dass header = [] in Ihrem Fall. Aber entweder verstehe ich das Problem nicht, oder ich verstehe nicht, warum Javascript benötigt wird. Kannst du es nicht mit einfachen CSS tun?

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

oder etwas ähnliches

Answer 2

Wenn Sie Bilder (oder andere externe Vermögenswerte) warten, um zu laden, dann müssen Sie entweder ein load Ereignishandler für die window.load auf die Elemente/Vermögen oder warten Sie direkt binden, Ereignis, damit die Dimensionen des Assets korrekt sind.

Alternativ können Sie die Assets angeben Dimensionen, zum Beispiel, wenn es ein Bild ist und Sie wissen, dass es 300px von 200px ist, legen Sie diese Werte als Attribute oder über CSS. Auf diese Weise kann eine korrekte Dimension erstellt werden, bevor das Ereignis window.load ausgelöst wird und dies mit jQuery Mobile-Seitenereignissen besser funktioniert, da Sie nicht warten können, bis window.load ausgelöst wird, wenn eine Seite über AJAX in das DOM gebracht wird.

Wenn Sie eine ältere Version als 1.1.0 RC1 verwenden, dann schlage ich Ihnen vor, es auszuprobieren, es hat CSS fixed footers, die aussehen/sich gut anfühlen und Ihre Seite 100% Höhe die ganze Zeit erscheinen lassen. http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download

Answer 3

Wenn Ihr Ziel ist, den Abstand zwischen der Kopf- und Fußzeile zu füllen, haben Sie in Betracht gezogen, die Höhe von data-role="content" zu bekommen?

Answer 4

Zuerst „pageshow“ Ereignis für Ihre Seite erstellen: (es hat „pageshow“ Ereignis und nicht „pagebeforeshow“ zu sein, denn im zweiten Fall werden Sie nicht die Höhe bekommen - Seite versteckt ist)

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

Innerhalb dieser Veranstaltung, überprüfen Sie die Kopf- und Fußzeilen und Seitengrößen (mit Polsterungen & Ränder): Etwas wie:

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

Dann berechnen und setzen Sie die neue Größe der Leinwand:

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

Die ganze Beispielcode:

// 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)});  
    });