如何讓 jQuery Mobile 內容 100% 高度？

在 jQuery Mobile 中設定內容高度的 100%

在 jQuery Mobile 中，將內容高度設定為 100%可能具有挑戰性可用空間，特別是當內容和內容之間有空間時

CSS 實現

以下CSS 程式碼可能不足以達到預期效果：

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

解決方案

增強的解決方案考慮頁首和頁腳工具列是否固定。如果是，則程式碼必須從其外部高度減去 1px 以解決負邊距。

對於 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);

對於 jQuery Mobile

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

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

附加說明

• 如果頁面上有固定工具列，則將在桌面瀏覽器上捲動 1px。
• 在行動裝置上，由於 body 和 .ui-page 高度，頁面可能無法捲動設定。

以上是如何讓 jQuery Mobile 內容 100% 高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！