问题描述
我正在开发jQuery Mobile页面,其中我的CSS是
code>到 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 footercontent height till the footer
解决方案Update
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();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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!