在整個Durandal外殼中使用Bootstrap粘性頁腳模板w /固定導航欄

Question

我想知道如何覆蓋Durandal內部div與id="applicationHost"注入的shell視圖樣式...我試圖使用常見的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">&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已經失去了它的全部高度......讓我瘋狂！ :)

Answer 1

我解決了這個問題的必要得到樣式後加入以下樣式到我的主HTML頁面的頁腳粘工作

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

中的第一選擇負責的applicationHost格在主HTML第二個是由durandal插入的（它有一類durandal包裝，所以你可以讓選擇更加具體，如果你想的話）。當你在你的shell.html一個額外的div文件，你可能需要以下條件：

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