Windows 8 用の WinJS アプリでは、-ms-grid と -ms-flexbox を使用してこれを実現できます。
html:
<div class="mypage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">My Page</span>
</h1>
</header>
<section role="main">
<canvas id="myCanvas">
</canvas>
<div class="ad-area-host">
<div class="ad-area" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;"
data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{applicationId: 'xyz', adUnitId: '123'}">
</div>
</div>
</section>
</div>
CSS:
// some of the css for fragment and section[role=main] already exists in default.css
.fragment
{
width: 100%;
height: 100%;
/* Define a grid with rows for a banner and a body */
-ms-grid-columns: 1fr;
-ms-grid-rows: 128px 1fr;
display: -ms-grid;
}
.mypage.fragment section[role=main]
{
-ms-grid-row: 2;
display: -ms-grid;
-ms-grid-rows: 1fr auto;
-ms-grid-columns: 1fr;
}
.ad-area-host
{
-ms-grid-row: 2;
height: 90px;
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-align: center;
}
私はこれをテストしていません。試してみる。アイデアは、グリッドを使用して ad-area-host を下部に配置することです。次に、ad-area-host div で -ms-flexbox display を使用して、広告エリアを中央に配置します。