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

如果使用此https://i.stack.imgur.com/T2MOI.png中提到的计算方法修复了问题以调整包装器高度。

将页脚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>

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

Answer 2

您正在使用footer作为课程，但您将样式声明为footer，其中涉及标记

将footer替换为.footer

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