ASP.NET 母版页和 Kendo UI 移动视图答案

【问题标题】：ASP.NET Master Page and Kendo UI Mobile ViewsASP.NET 母版页和 Kendo UI 移动视图
【发布时间】：2013-01-18 21:46:46
【问题描述】：

假设我必须使用 ASP 母版页并在其中设置 Kendo UI Mobile 布局，同时使用 <asp:contentplaceholder> 加载 aspx 页面内容。为了让它正常工作，我尝试了以下方法（为了便于阅读，在此处剥离标签属性）：

母版页文件：

<html>
<head></head>
<body>
    <form>
        <asp:contentplaceholder></asp:contentplaceholder>    
    </form>

    <!-- Master Layout -->
    <div data-role="layout" data-id="mMasterLayout">
        <header data-role="header">
        </header>
        <footer data-role="footer">
        </footer>
    </div>

    <!-- load scripts here (jquery, kendo, etc.) -->

    <script>
        var app;

        $(document).ready(function () {
            app = new kendo.mobile.Application(document.forms, {
                layout: "mMasterLayout"
            });
        });
    </script>
</body>
</html>

使用母版页文件的其他页面：

<asp:Content>
    <!-- View -->
    <div data-role="view">    
        <!-- Content -->
        <div data-role="content">
            .
            .
            .
        </div>
    </div>
</asp:Content>

因此，检查 DOM 我没有发现任何错误，并且 Kendo 正在正确呈现。问题是，我的屏幕是空白的（只看到正文背景颜色）。在 DOM 中，要显示的预期视图实际上是可见的。

有人有什么想帮忙的吗？我觉得针对 Kendo 的表单容器来呈现我的视图是罪魁祸首，但我不确定。我还尝试继承 body 标签的宽度和高度，看看是否有帮助，但它什么也没做。

另外，请注意，我必须让它以这种方式工作，因为解决方案没有设置为 MVC，所以没有 MVVM 或类似的东西是可能的。

我正在使用最新版本的 Kendo UI Mobile 和 JQuery。谢谢！

更新：

在我的母版页文件中硬编码form 标记的固定高度确实会产生我想要的视图内容。我想剩下的问题是..将此表单标签扩展到文档正文高度的最佳方法是什么..

【问题讨论】：

标签： jquery asp.net html kendo-ui

【解决方案1】：

找到我自己的解决方案 - 将以下 CSS 属性添加到母版页文件：

html { height: 100%; }

【讨论】：