1

我想知道如何覆盖在 div 内的 Durandal 中注入的 shell 视图样式id="applicationHost"......我正在尝试使用常见的 Bootstrap 模板（带有固定导航栏的粘性页脚），它作为独立的工作，但只要我在 shell 中使用它。 html“包装器”失去了它的自动高度......

这是我的shell.html

<div>
    <div id="wrapper">
            <!-- ko compose: {view: 'nav'} -->
            <!-- /ko--> 

        <div id="content" class="container-fluid">
            <!--ko compose: { 
                model: router.activeItem, //wiring the router
                afterCompose: router.afterCompose, //wiring the router
                transition:'entrance', //use the 'entrance' transition when switching views
                cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
                }--><!--/ko-->                                 
        </div>
        <div id="push"></div>
    </div>
     <footer id="footer">
         <div class="container-fluid">
             <div class="row-fluid">
                 <div class="span6"><p class="muted">&copy; ABC Company Inc. 2013. All rights reserved.</p></div>
                 <div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>     
             </div>
         </div>
     </footer>

 </div>

导航子视图只有标准<nav id="mainnav" class="navbar navbar-fixed-top">，样式与 Bootstrap 示例页面上的样式相同...

当我通过 Firebug 检查样式时，我可以清楚地看到包装器 div 已经失去了它的全部高度......让我发疯！:)

4

1 回答 1

1

我通过在使粘性页脚工作所需的样式之后将以下样式添加到我的主 html 页面来解决此问题

/*durandal fixes*/
#applicationHost, #applicationHost > div
{
    height: 100%; 
}

第一个选择器负责主 html 页面中的 applicationHost div，第二个选择器由 durandal 插入（它有一个 durandal-wrapper 类，因此您可以根据需要使选择器更具体）。由于您的 shell.html 文件中有一个额外的 div，您可能需要以下内容：

/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
    height: 100%; 
}
于 2013-05-14T16:01:53.433 回答