Ответ 1

Update

Я добавил Pure CSS Solution ниже.

Я заметил, что .ui-content div не заполняет пустое пространство 100%, он все еще отсутствует 2px. Это происходит из фиксированных панелей заголовков и нижних колонтитулов, так как они имеют margin-top: -1px и margin-bottom: -1px соответственно. (fiddle)

Это было не очевидно, так как обе страницы и нижний колонтитул имеют тот же черный data-theme="b". Я изменил .ui-page background-color: red;, чтобы показать разницу.

Поэтому для достижения наилучших результатов необходимо проверить, установлены ли панели инструментов. Ниже приведено расширенное решение.

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

Поскольку фиксированные панели инструментов в jQuery Mobile 1.2 и ниже не получают -1 для top/bottom, нет необходимости вычитать 1px из панели инструментов .outerHeight().

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

Демо - w/fixed toolbars

Демо - без фиксированных панелей инструментов ⁽¹⁾

⁽¹⁾ На странице браузера рабочего стола будет прокручиваться на 1px; однако на мобильном устройстве этого нет. Это вызвано высотой body, установленной на 99.9% и .ui-page до 100%.

Ответ 2

Это просто добавить пару аргументов в ответ @Omar.

Обновленный FIDDLE

Поместите свой код масштабирования внутри функции и добавьте прокрутку (0,0) вверх. Это устраняет странные проблемы, которые могут возникать при изменении ориентации (портретный пейзаж) на некоторых устройствах.

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

Затем функция должна быть вызвана на pagecontainershow (страницы, если jQM 1.3), и вы должны добавить обработчик для изменения размера окна и изменения ориентации, чтобы сохранить размер контента должным образом при изменении размера видового экрана:

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();        
});

$(window).on("resize orientationchange", function(){
    ScaleContentToDevice();
});

Ответ 3

Чистое решение CSS

Важное примечание: Используйте это решение для определенных страниц, где вы не хотите, чтобы страница или контент страницы прокручивались по вертикали. Поскольку страница height будет установлена ​​на 100%, следовательно, она не будет прокручиваться, и вы столкнетесь с этой проблемой .

• Полноэкранный режим:

  html,
  body,
  #pageID { /* specify page */
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #pageID .ui-content {
    padding: 0;
  }
  
  .ui-content,
  .ui-content #full-height-div { /* divs will inherit page height */
    height: inherit;
  }
  

  Демо

2. Исправлены панели инструментов (верхний/нижний колонтитул):

   html,
   body,
   #pageID {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
   #pageID,
   #pageID * {
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
   }
   
   #pageID .ui-content {
     height: inherit; /* inherit height without padding nor border */
   }
   

   Демо

   ---

   3. Плавающие панели инструментов:

      html,
      body,
      #pageID {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      #pageID,
      #pageID * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
      }
      
      #pageID .ui-content {
        height: calc(100% - 89px); /* 88px = header height 44px and footer 44px plus 1px */
      }
      

      Демо

Ответ 4

Вы можете достичь "высоты 100%" только с помощью CSS. Добавьте в свой селектор ui-содержимого следующее:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

Протестировано на jQuery Mobile v1.4.3

Ответ 5

С чистым CSS прекрасно работает для портретных страниц. Вы должны установить верхнее и нижнее положение в зависимости от высоты вашего верхнего и нижнего колонтитулов

position: absolute;
top: 88px; /*your header height*/
right: 0;
bottom: 44px; /*your footer height */
left: 0;
background: white;

Ответ 6

Я изменяю ответ @ezanker.

Это работает, но если у меня есть две страницы, страница 2 изменит размер, когда я перейду на страницу 2 со страницы 1.

И если я меняю событие pagecontainershow на pagecontainerbeforeshow, он работает неправильно.

Я отлаживаю и обнаруживаю, что высота верхнего или нижнего колонтитула неверна перед показом.

код

function ScaleContentToDevice(nextPage){
    var screen = $.mobile.getScreenHeight();
    var header = nextPage.children(".ui-header").hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight();
    var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight()
    var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height();
    var content = screen - header - footer - contentCurrent;

    nextPage.children(".ui-content").height(content);
}

$(document).on( "pagecontainershow", function(event, ui){
    var nextPage = $(ui.toPage[0]);
    ScaleContentToDevice(nextPage);
});

Ответ 7

position: fixed;
height: 100%;

сделает это!