设置内容高度 100% jquery mobile [英] set content height 100% jquery mobile

问题描述

我正在开发 jQuery Mobile 页面，其中我的 CSS 是

.ui-content {背景:透明 url('./images/bg.jpg');背景尺寸:100% 100%；最小高度:100%；颜色:#FFFFFF；文本阴影:1px 1px 1px #000000;}

但是页面显示是这样的

我不想要内容和页脚之间的空白内容高度到页脚

解决方案

更新

<块引用>

我在下面添加了一个 - 带有固定工具栏

演示 - 没有固定工具栏⁽¹⁾

⁽¹⁾ 在桌面浏览器页面将滚动 1px；但是，在移动设备上却没有.这是由 body 的高度设置为 99.9% 和 .ui-page 为 100% 引起的.>

I am developing jQuery Mobile page in which my CSS is

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

but page displays like this

I don't want that empty space between content and footer content height till the footer

解决方案

Update

I have added a Pure CSS Solution below.

I have noticed that .ui-content div doesn't fill the empty space 100%, it is still missing 2px. Those comes from fixed toolbars header and footer, as they have margin-top: -1px and margin-bottom: -1px respectively. (fiddle)

It wasn't obvious before as both page div and footer have the same black data-theme="b". I have changed .ui-page's background-color: red; to show the difference.

Therefore, to achieve best results, it's necessary to check whether toolbars are fixed. Below is the enhanced solution.

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

jQM <= 1.2

Since fixed toolbars in jQuery Mobile 1.2 and below don't get -1 for top/ bottom, there is no need to do subtract 1px from toolbar's .outerHeight().

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

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

Demo - w/ fixed toolbars

Demo - w/o fixed toolbars ⁽¹⁾

⁽¹⁾ On Desktop browser page will scroll by 1px; however, On mobile device it doesn't. It's caused by body's height set to 99.9% and .ui-page to 100%.

这篇关于设置内容高度 100% jquery mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！