1

div内のDurandalに挿入されているシェルビューのスタイルをオーバーライドする方法を考えていますid="applicationHost"...共通のBootstrapテンプレート（固定navbar付きのスティッキーフッター）を使用しようとしていますが、スタンドアロンとして機能しますが、シェル内で使用するとすぐに. 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 サブビューには標準<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 を処理し、2 番目のセレクターは durandal によって挿入されたものを処理します (durandal-wrapper のクラスがあるため、必要に応じてセレクターをより具体的にすることができます)。shell.html ファイルに追加の div があるため、次のものが必要になる場合があります。

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