Currently, I am developing a Windows 8 application using Html, CSS, and JavaScript. Upon entering snapped view, certain screens are unable to display the entire content, leading me to seek a solution for vertical scrolling.
Is there a way to address this issue using html or 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>
The dimensions and styling of #pageText, #pageAdd, and #pageCalc are specified in the css code. In snapped view, the following snippet is utilized:
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;
}
}