我想知道如何使用 id="applicationHost"
覆盖在 div 内的 Durandal 中注入(inject)的 shell View 样式...我正在尝试使用通用的 Bootstrap 模板(sticky footer with fixed navbar),它可以独立运行,但只要我在 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">© 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>
导航 subview 只有标准 <nav id="mainnav" class="navbar navbar-fixed-top">
并且样式与 Bootstrap 示例页面上的样式相同...
当我通过 Firebug 检查样式时,我可以清楚地看到 wrapper div 已经失去了它的完整高度……快把我逼疯了! :)
最佳答案
我通过在让粘性页脚工作所需的样式之后将以下样式添加到我的主 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%;
}
关于css - 在整个 Durandal shell 中使用带有固定导航栏的 Bootstrap 粘性页脚模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16531513/