如何在 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 解决方案

由于 1.2 及以下版本中的固定工具栏没有引入 1px 边距，因此简化了计算：

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

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

全分辨率

要考虑内容 div 周围的填充，请直接调整内容变量或减去填充值(32px) 来自 contentCurrent 变量。此外，如果存在固定工具栏，请从其outerHeight() 测量中删除 1px。

以上是如何在 jQuery Mobile 中准确计算内容高度以填充页眉和页脚之间的空间？的详细内容。更多信息请关注PHP中文网其他相关文章！