Wie kann ich jQuery Mobile-Inhalte auf 100 % Höhe bringen?

100 % Höhe für Inhalte in jQuery Mobile festlegen

In jQuery Mobile kann es schwierig sein, die Inhaltshöhe auf 100 % festzulegen den verfügbaren Platz, insbesondere wenn zwischen Inhalt und Fußzeile Platz ist.

CSS Implementierung

Der folgende CSS-Code reicht möglicherweise nicht aus, um die gewünschten Ergebnisse zu erzielen:

.ui-content {
  background: transparent url('./images/bg.jpg');
  background-size: 100% 100%;
  min-height: 100%;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
}

Lösung

Eine erweiterte Lösung berücksichtigt ob die Symbolleisten für Kopf- und Fußzeile fixiert sind. Wenn dies der Fall ist, muss der Code 1 Pixel von ihrer äußeren Höhe abziehen, um die negativen Ränder zu berücksichtigen.

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. Subtract this value if desired. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

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

Für jQuery Mobile <= 1.2:

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

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

Zusätzliche Hinweise

• Wenn auf der Seite feste Symbolleisten vorhanden sind, wird der Inhalt in Desktop-Browsern um 1 Pixel gescrollt.
• Auf Mobilgeräten scrollt die Seite aufgrund des Textkörpers und der .ui-Seitenhöhe möglicherweise nicht Einstellungen.

Das obige ist der detaillierte Inhalt vonWie kann ich jQuery Mobile-Inhalte auf 100 % Höhe bringen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!