todo:
the 2 rows layout can auto fullscreen grid.
if second row show,the first row’s height is total height – second’s height;
if second row hide,the first row’s height is total height;
how:
in html:
<body>
<div id="contentHost">
<!-- Fragment host -->
<iframe id="workeriframe" src="ms-appx-web:///index.htm" style="width: 100%; height: 100%;"></iframe>
<div class="adarea pkhide">
</div>
</div>
</body>
in css:
#contentHost {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr auto;
display: -ms-grid;
width: 100%;
height: 100%;
}
#contentHost #workeriframe {
overflow: hidden;
}
#contentHost .adarea {
-ms-grid-row: 2;
height:60px;
}
#contentHost .adarea > div {
display:inline-block;
}
.pkadcontrol {
width:292px;
height:60px;
}
.pkhide {
display:none;
}in javascript:
var adarea = document.getElementsByClassName("adarea").item(0);show adarea control:
WinJS.Utilities.removeClass(adarea, "pkhide");hide adarea control:
WinJS.Utilities.addClass(adarea, "pkhide");look like it:
show adarea control:
hide adarea control:
yes,it is auto fullscreen.
No comments:
Post a Comment