Angular 4, how to keep footer at bottom with dynamic page content - css

Question

my app.component.html code is as follows
<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>
my footer.component.html code is:
<div class="footer">
<div class="col-sm-10">
© {{currentYear}} - UMD IP PTY LTD
</div>
<div>{{environment}}</div>
The CSS which I used to show the footer at the bottom of the page is
footer {
position: absolute;
bottom: 0;
left: 25%;
width: 75%;
height: 50px;
}
Now the issue is angular loads the data dynamically on the page. Initially footer is at the bottom of the page but when data is added to the page and the controls added at runtime on the page exceeds the initial page height my footer remains at the initial page which ends up somewhere in between the page.
How to fix this?
In the picture below controls are added dynamically using reactive form which results in footer being show between the controls.

Answer 1

If fixed the issue to adjust the wrapper height using the calc method mentioned on this link .
Changed the footer html to this
<div class="footer">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-7">
© {{currentYear}} - xyz IP PTY LTD
</div>
<div class="col-sm-2 text-right">{{environment}}</div>
</div>
</div>
and changed the css for the home page to below
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
and changed the home page code to this.
<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>
</div>
<footer class="footer"></footer>
This works perfectly with Visual Studio Javascriptservices template for angular. footer adjusts itself even after adding the controls dynamically

Answer 2

You are using footer as class but you are declaring styles as footer which refers to tag
Replace footer to .footer
.footer {
position: absolute;
bottom: 0;
left: 25%;
width: 75%;
height: 50px;
}