Jquery 视图中的粘性页脚，而不是shell.html

我有一个淘汰赛和durandal应用程序，它的页脚不会粘住。
我相信这是因为在shell.html中没有指定页脚

shell.htm
<div id="wrap" class="col-md-10 col-md-offset-1 col-xs-12">

  <nav class="navbar navbar-inverse navbar-static top" role="navigation"></nav>

  <div class="page-host" data-bind="router: { transition: 'entrance', cacheViews: true }">

</div>

shell.htm

但在组成其他视图的视图中指定

wizard.html

<div class="container-fluid">
    <div data-bind="compose:{model:currentWizardView,activationData:$root,transition: 'entrance'}"></div>
</div>    
<div id="push"></div>
<div id="footer">
<div class="footer-bar">
    <button id="previous" class="btn btn-lg btn-next" data-bind="click:previous,enable:canMovePrevious">< Previous</button>
    <button id="next" class="btn btn-lg btn-next" data-bind="click:next,visible:canMoveNext">Next ></button>

</div>

wizard.html
<先前
下一步>

shell.html构成wizard.html文件

所以基本上

html包装

导航栏

编曲向导

Wizard.html包装

组合向导视图

页脚

我已经在网上搜索了好几天了，并且尝试了多个css粘性页脚（即导航栏固定底部、位置：固定、vh-视口高度）都没有给我所需的外观

我需要页脚在页面底部，无论合成视图的高度如何

有什么想法吗

html。。。把绒毛拿出来

<div id="applicationHost" class="container-fluid">
    <div id="wrap" class="col-md-10 col-md-offset-1 col-xs-12" data-view="views/shell" data-active-view="true" style="">

        <nav class="navbar navbar-inverse navbar-static top" role="navigation">
        </nav>
        <div class="page-host" data-bind="router: { transition: 'entrance', cacheViews: true }">
            <div class="container-fluid" data-view="views/wizard" data-active-view="true" style="">
                <div data-bind="compose:{model:currentWizardView,activationData:$root,transition: 'entrance'}">
                    <div class="durandal-wrapper" data-view="views/texture" data-active-view="true" style="">
                        <div data-bind="compose:'templates/_value.html'">
                            <div class="durandal-wrapper" data-view="views/templates/_value" data-active-view="true">
                                <ul class="list-group" data-bind="foreach: values">
                                    <li class="list-group-item active" data-bind="click:$parent.setValue.bind($parent,$index()),css:{active: $parent.value() == $index()}">
                                        <label data-bind="text: $data"></label>
                                    </li>
                                </ul>
                            </div>
                        </div><div class="clearfix"></div>
                    </div>
                </div>
                <div id="push"></div>
                <div id="footer">
                    <div class="footer-bar">
                        <button id="previous" class="btn btn-lg btn-next" data-bind="click:previous,enable:canMovePrevious">&lt; Previous</button>
                        <button id="next" class="btn btn-lg btn-next" data-bind="click:next,visible:canMoveNext">Next &gt;</button>
                    </div>
                </div>
            </div>
            <div class="durandal-wrapper" data-view="views/serviceTypes" style="display: none;">
                <div class="row">
                </div>
            </div>
        </div>
    </div>
</div>

数据绑定=“单击：$parent.setValue.bind（$parent，$index（）），css:{active:$parent.value（）==$index（）”>


以前的
下一个

与其说是生命周期中的位置问题，不如说是页面结构问题

Durandal在其构成方式上完全正交：shell是一个视图/视图模型对，就像其他任何东西一样。路由器操纵外壳，将视图组合到外壳中并管理其可见性。最好的方法可能是获得一个工作的Durandal应用程序，在浏览器上点击F12，然后观察当用户操作导致视图加载时DOM会发生什么

每个shell视图都包含以下内容的一些变体：

<div class="container page-host" data-bind="router: { cacheViews:true }"></div>

注意到路由器的敲除绑定。这就是将视图封送到DOM中的方法。因此，您的任何视图中的所有内容都是该div的间接子对象，而这正是使您定位页脚的尝试感到奇怪的地方

您可以通过重新设置页脚div的父级来解决布局问题，但这会给您带来一个新问题：页脚div的可见性将不再依赖于它在逻辑上所属的视图

要将视图的粘性页脚重新置于自动路由器控制之下，您需要管理其父级。您可以使用视图模型的激活和停用事件中的代码来实现这一点，但更优雅的解决方案是将其parentElement数据绑定到视图模型的属性

---

我想粘性页脚div需要是

$（document.body）

的直接子对象，您能提供一个处理其中呈现的html的工具吗？这将使您更容易修复CSS。