如何在快照視圖中添加垂直滾動到Windows 8應用程序

Question

我正在使用Html，CSS和JavaScript的Windows 8應用程序。在快照視圖中，某些屏幕無法看到整個內容，這就是爲什麼我想要垂直滾動的原因。

我該如何解決這個問題？我想在html或CSS中使用它。

HTML：

<section aria-label="Main content" role="main"> 
     <div class="divContainer" style="width: auto; height: auto; overflow:auto; display: -ms-grid; 
      -ms-grid-columns: 450px 50px 450px 46px 250px; 
      -ms-grid-rows: auto"> 
      <div id="pageCalc"> 
       <h2>User information</h2> 
       ... 
       Some text here 
       ... 
      </div> 
      <div id="pageText"> 
       <h2>Contact information</h2> 
       ... 
       Some text here 
       ... 
       <img id="imageDiv" src="/images/aboutlogo.png" border="0" alt=""> 


      </div> 
      <div id="pageAdd"> 
       ... 
       An add here 
       ... 
      </div> 
     </div> 
    </section> 

的#pageText，#pageAdd和＃pageCalc的寬度，高度和類似的東西是definated在CSS，然後在抓拍視圖，它使用這段代碼：

CSS：

@media screen and (-ms-view-state: snapped) { 
.about section[role=main] { 
    margin-left: 20px; 
    margin-right: 20px; 
} 

.divContainer { 
    height:1080px; 
    width: 230px; 
    display:-ms-grid; 
    -ms-grid-column: 230px; 
    -ms-grid-row: auto 20px auto 20px auto; 
    overflow: auto; 

} 

#pageCalc, #pageText, #pageAdd { 
    width: 230px; 
} 

#pageCalc { 
    -ms-grid-column: 1; 
    -ms-grid-row: 1; 
} 

#pageText { 
    -ms-grid-column: 1; 
    -ms-grid-row: 3; 
} 

#pageAdd { 
    -ms-grid-column: 1; 
    -ms-grid-row: 5; 
} 

}

Answer 1

的Win8應用在HTML，CSS和JavaScript在Microsoft WWA主機進程上運行。這是基於Internet Explorer的渲染平臺。因此，您可以在IE上製作應用程序。只需將你拍下的內容封裝成固定高度的div和overflow: auto，你就可以獲得一個垂直滾動條。