在jQuery mobile中页面底部没有设置内容空间?

时间:2011-08-25 16:01:13

标签: ipad jquery-mobile

我在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>

2 个答案:

答案 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