Wie kann ich die Inhaltshöhe in jQuery Mobile genau berechnen, um den Raum zwischen Kopf- und Fußzeile zu füllen?

Verbesserung der Berechnung der Inhaltshöhe für Webseiten mit jQuery Mobile

Um den Raum zwischen Kopf- und Fußzeile in einer jQuery Mobile-Webseite effektiv zu füllen Eine genaue Berechnung der Höhe des Inhalts ist entscheidend. Um dies zu erreichen, müssen die Auswirkungen fester Symbolleisten berücksichtigt werden, die eine leichte Lücke hinterlassen können.

Lösung für jQuery Mobile >= 1.3

var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight()  - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

/* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

Lösung für jQuery Mobile <= 1.2

Da feste Symbolleisten in Versionen 1.2 und niedriger führen keinen 1-Pixel-Rand ein, die Berechnung ist vereinfacht:

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

Volle Auflösung

Um auch den Abstand um das Inhaltsdiv herum zu berücksichtigen Passen Sie die Inhaltsvariable direkt an oder subtrahieren Sie den Füllwert (32 Pixel) von der Inhaltsvariablen. Wenn feste Symbolleisten vorhanden sind, entfernen Sie außerdem 1 Pixel aus der Messung von „outerHeight()“.

Das obige ist der detaillierte Inhalt vonWie kann ich die Inhaltshöhe in jQuery Mobile genau berechnen, um den Raum zwischen Kopf- und Fußzeile zu füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!