Принудительно заставить data-role = "page" ВСЕГДА делать высоту 100% независимо от ориентации - PullRequest
Новая
       0

Принудительно заставить data-role = "page" ВСЕГДА делать высоту 100% независимо от ориентации

0 голосов
/ 23 января 2012

Я пытался работать над этим на CSS и JQuery, но все не удается.Есть ли способ по умолчанию ВСЕГДА сохранять страницу роли данных или контент для отображения в 100% ВЫСОТЕ?

Каждый раз, когда я делаю портретный режим, а содержание внутри data-role = "content" короткое, это оставляет неприятный пробел.пожалуйста, см. захват прилагается.

Please help

Ответы [ 4 ]

4 голосов
/ 26 марта 2013 
<div data-role="header" data-position="fixed"></div>
<div data-role="content">
   Content Goes here            
</div>
<div data-role="footer" data-position="fixed" ></div>

data-position = "fixed" всегда заставляет верхний и нижний колонтитулы придерживаться верхней и нижней части экрана, а содержимое будет занимать область переименования

2 голосов
/ 19 апреля 2012

Вы можете использовать jQueryMobile, чтобы определить высоту области просмотра, а затем убрать высоту верхнего и нижнего колонтитула.У вас останется нужная вам высота.

HTML - для каждой страницы 

<body onload="init()">
    <div data-role="page" id="page" data-theme="a">
        <div data-role="header">
            <h1>Header text</h1>
        </div>
        <div class="page-content">
            <div data-role="content">
                <h1>Content here...</h1>
            </div>
            <div data-role="content">
                <h1>More content here...</h1>
            </div>
        </div>
        <div data-role="footer">
            <h4>Footer text</h4>
        </div>
    </div>
</body>

JS 

// Function called when page has loaded
function init() {
  document.addEventListener("deviceready",onDeviceReady,false);
}

// Function called when phonegap is ready
function onDeviceReady() {
    //All pages at least 100% of viewport height
    var viewPortHeight = $(window).height();
    var headerHeight = $('div[data-role="header"]').height();
    var footerHeight = $('div[data-role="footer"]').height();
    var contentHeight = viewPortHeight - headerHeight - footerHeight;

    // Set all pages with class="page-content" to be at least contentHeight
    $('div[class="page-content"]').css({'min-height': contentHeight + 'px'});
 }
1 голос
/ 23 января 2012

Попробуйте добавить фоновое изображение к элементу body или html.

0 голосов
/ 23 января 2012

Я думаю, проблема в том, что ваша страница либо с темой данных по умолчанию, либо вы используете data-theme = "c".Попробуйте использовать: 

Use data-theme="a" on your page
...