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

Question

我想知道如何使用id="applicationHost"覆蓋在div的Durandal中注入的shell視圖樣式...我正在嘗試使用常見的Bootstrap模板（ 帶有固定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檢查樣式時，我可以清楚地看到wrapper div失去了它的全部高度……讓我發瘋了！ :)

Answer 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%; 
}