我在iPad的页面底部获得了空白区域,我使用的是jQuery mobile beta2。我将UI拆分为主页面和辅助页面。 当我从第一页移到第二页时,我在iPad的底部会有空白区域。谁能帮我? 提前谢谢。
代码:
<div data-role="page" class="type-interior" id="homePage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="contentHomePage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
//页:2
<div data-role="page" class="type-interior" id="resultPage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="resultPage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
答案 0 :(得分:1)
她找到了解决这个问题的方法。我设定了内容高度。
.ui-content {
min-height: 775px;
}
答案 1 :(得分:0)
这是因为你的'内容 - 主要'并没有占用太多空间。您可以通过几种方式解决它,但我想最常用的是使用媒体查询(CSS)并在CSS文件中设置div维度。有关详细信息:http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html
BTW,你可能想要使用jQuery mobile Beta 3