如何使 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中文网其他相关文章！