Angular 4，如何使用动态页面内容将页脚保持在底部

Question

我的app.component.html代码如下

<div class='container-fluid'>
<div class='row'>
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>
<div class="row">
    <footer></footer>
</div>    

我的footer.component.html 代码是：

<div class="footer">
<div class="col-sm-10">
    &copy; {{currentYear}} - <a href="">UMD</a> IP PTY LTD
</div>
<div>{{environment}}</div>

我用来在页面底部显示页脚的 CSS 是

   footer {
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 75%;
    height: 50px;
}

现在的问题是在页面上动态加载数据。最初页脚位于页面底部，但当向页面添加数据并且在运行时添加到页面上的控件超过初始页面高度时，我的页脚仍位于初始页面，最终位于页面之间的某个位置。

如何解决这个问题？

在下图中，控件是使用反应形式动态添加的，从而导致在控件之间显示页脚。

Answer 1

如果解决了使用link 中提到的 calc 方法调整包装高度的问题。

把页脚html改成这个

<div class="footer">
<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-7">
        &copy; {{currentYear}} - <a href="http://www.xyz.com.au">xyz</a> IP PTY LTD
    </div>
    <div class="col-sm-2 text-right">{{environment}}</div>
</div>

并将主页的css更改为下方

.content {
    min-height: calc(100vh - 70px);
}

.footer {
    height: 50px;
}


footer {
    background: #42A5F5;
    color: white;
    line-height: 50px;
    padding: 0 20px;
}

并将主页代码更改为此。

<div class='content' >
 <div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

这与angular 的Visual Studio Javascriptservices 模板完美配合。即使在动态添加控件后，页脚也会自行调整

Answer 2

您使用footer 作为类，但您将样式声明为footer，它指代标签

将footer 替换为.footer

  .footer {
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 75%;
    height: 50px;
}