ListView не имеет скроллбар

Question

У меня проблема с скроллинга

Внутри тела у меня есть DIV так:

<div id="PageBody"></div> 

Там я загрузить мой ListView с JavaScript

WinJS.UI.Pages.render("./pagebody.html",document.getElementById("PageBody"), null, true); 

PageBody.html выглядит следующим образом

<!-- Simple template--> 
<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> 
    <div class="smallListIconTextItem"> 
     <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" /> 
     <div class="smallListIconTextItem-Detail"> 
      <h4 class="win-h4" data-win-bind="textContent: title"></h4> 
      <h6 class="win-h6" data-win-bind="textContent: text"></h6> 
     </div> 
    </div> 
</div> 

<!-- listview--> 
<div id="listView" 
    class="win-selectionstylefilled" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
      itemDataSource: Sample.ListView.data.dataSource, 
      itemTemplate: select('.smallListIconTextTemplate'), 
      selectionMode: 'none', 
      tapBehavior: 'none', 
      layout: { type: WinJS.UI.ListLayout } 
    }"> 
</div> 

Теперь, если мое listview содержит большее количество элементов (все элементы не могут отображаться сразу), тогда полоса прокрутки не появляется, и я не могу получить доступ к скрытым элементам.

Если я делаю просмотр в обычном режиме (без загрузки его в div), прокрутка работает нормально. Тем не менее, мне нужно загрузить различные списки или другие элементы управления в этот div (в зависимости от того, какой пользователь хочет)

Как я могу обойти эту проблему?

UPDATE: Я добавил в «PageBody» Див это: стиль = «переполнение: прокрутки» скроллбара шоу, но не работает (и не прокручивать)

UPDATE2: С макет сетки прокрутки работ, но по-прежнему с макета списка не

Answer 1

Проблема была

height: 100% 

в .css файле

Я удалил его, но единственная проблема была, как уместить ListView на страницу. Я занимался этим в javascript.

window.addEventListener("resize", function() { 
      var listviewdiv = document.getElementById("listView"); 
      var h = window.innerHeight; 

      listviewdiv.setAttribute("style", "height:" + h.toString() + "px"); 
     }); 

И тогда единственная проблема остается в том, как это сделать на начальном этапе, когда приложение создается и загружается (код выше работает только после того, как пользователь изменяет размер окна)

Для этого случая я поставил этот код:

WinJS.UI.Pages.render("./PageBody.html", PageBody).done(function() { 
      var listviewdiv = document.getElementById("listView"); 
      var h = window.innerHeight; 

      listviewdiv.setAttribute("style", "height:" + h.toString() + "px"); 
     }); 

Answer 2

Поместите этот CSS в ваш DIV, в котором данные заселение:

overflow-y:auto; 

JSFiddle для него.