如何在 jQuery Mobile 中準確計算內容高度以填滿頁首和頁尾之間的空間？

使用jQuery Mobile 增強網頁的內容高度計算

有效填充jQuery Mobile 網頁中頁眉和頁腳之間的空間，準確計算內容的高度至關重要。為此，需要考慮固定工具列的影響，這可能會留下微小的間隙。

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

jQuery Mobile 解決方案

jQuery Mobile 解jQuery Mobile 解var header = $(".ui-header").outerHeight(); var footer = $(".ui-footer").outerHeight();

全解析度

要考慮內容div 周圍的填充，請直接調整內容變數或減去填充值(32px) 來自contentCurrent 變數。此外，如果存在固定工具列，請從其outerHeight() 測量中刪除 1px。

以上是如何在 jQuery Mobile 中準確計算內容高度以填滿頁首和頁尾之間的空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！