Question

我是Windows 8开发的新手，我正在使用Html / Javascript路由。我已经开始使用Grid模板了。

为什么当我添加

测试内容

..到正文中的内容区域html（而不是项目模板html）时，文本测试内容是否在页面上不显示我开始这个项目了吗？

实施例。

    </head>

<div>Test Content</div>

<!-- The content that will be loaded and displayed. -->
<div class="groupdetailpage 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"></span>
        </h1>
    </header>
    <div>Test Content</div>
    <section aria-label="Main content" role="main">
        <div class="itemslist win-selectionstylefilled" title="Test Content" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
    </section>
</div>

Answer 1

建议参考default.css，并阅读网格布局（显示：-ms-grid）

.fragment {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

.groupdetailpage.fragment占用100％的宽度和高度，因此片段外的测试内容div不可见。

.fragment header[role=banner] {
    // since -ms-grid-row is not defined, this element takes row 1
    /* Define a grid with columns for the back button and page title. */
    -ms-grid-columns: 39px 81px 1fr auto;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
}

.fragment section[role=main] 
{
    -ms-grid-row: 2;
}

.groupdetailpage.fragment显示有-ms-grid。因此，.header和section [role = main]只是可见的，它们分别占据第1行和第2行。

像这样更改部分会使测试内容div可见。

<section aria-label="Main content" role="main">
    <div>Test Content</div>
</section>

阅读网格布局将有所帮助，因为这对基于winjs的Windows应用开发非常关键。

Windows 8：Html标记未显示在页面上

1 个答案: