пространство контента не установлено внизу страницы в jQuery mobile?

Question

Я получаю пустое пространство внизу страницы в iPad и использую мобильную бета-версию jQuery. Я делю пользовательский интерфейс на первичную и вторичную страницу. при переходе с первой страницы на вторую я получаю пустое пространство в нижней части 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>

Answer 1

Ей я нашел решение этой проблемы.Я устанавливаю высоту содержимого.

.ui-content {
                min-height: 775px;
            }    

Answer 2

Это потому, что ваш «основной контент» не занимает слишком много места.Вы можете решить это несколькими способами, но я предполагаю, что наиболее логичным будет использование медиа-запросов (CSS) и установка измерений div в вашем CSS-файле.Для получения дополнительной информации: http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html

Кстати, вы можете использовать jQuery mobile Beta 3