我正在使用 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 的宽度、高度和类似的东西在 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;
}
}