Angular simple footer issue (with ngFor loop in child component) - css

Question

I'm having a problem with trying to create a footer in an angular4 app. The issue seems to be if a child component loaded in the app-router is of greater height than it's parent component... The footer on the parent doesn't go to the bottom of the full page, but just to the bottom of the parent component.
eg.
I've placed my footer at the very bottom of the app.component.html file:
<div class="contain">
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<app-footer></app-footer>
The footer is a very simple element:
<footer style="height:150px; background-color:blue">
<h3 class="text-light mt-5">This is the app footer</h3>
</footer>
The problem is the footer doesn't go to the bottom of the total app, it goes to the bottom of the app.component.html...but if the child component being loaded in the app-router is large ie the result of an ngFor loop of many elements... then it the footer is no longer underneath the child.
I can demonstrate the problem more simply by this:
I add a simple component of height 3000px and bootstrap background color danger orange:
<div class="bg-danger" style="height: 3000px;">
</div>
I load the component via routes to go into the router outlet.
The result is this:
Image of problem
How can I make sure the footer is at the bottom of the page?
EDIT:
This CSS is attached to the .css file in the app component.
None of the others seem to address the issue:
#splashbackground{
background:url('/assets/images/photo.jpg') no-repeat;
background-size:cover;
min-height:950px;
}
.dark-overlay{
background-color:rgba(0,0,0,0.4);
position:absolute;
top:0;
left:0;
width:100%;
min-height:952px;
}
Outside attached to other .css files there's these, but none of them really deal with positioning of the card elements or anything. What can I add to the footer element to ensure it will be at the bottom?
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.clickable{
cursor: pointer;
}
.borderThin{
border: 1px gray inset;
border-radius: 15px;
}
.vertical-align {
position:relative;
top:50%;
}
.card-img-left {
border-bottom-left-radius: calc(.25rem - 1px);
border-top-left-radius: calc(.25rem - 1px);
float: left;
padding-right: 1em;
margin-bottom: -1.25em;
}
.panelTheme {
background-color: #222;
color:#999;
border-radius: 5px;
}
/*Image Insertion*/
.customClass {
background-color: #222;
border-radius: 5px;
margin:5px;
width: 500px;
}
.customClass .img-ul-upload {
background-color: #222 !important;
}
.customClass .img-ul-clear {
background-color: #222 !important;
}
.customClass .img-ul-drag-box-msg {
color: purple !important;
}
.customClass .img-ul-container {
background-color: #222 !important;
}
/*Image Insertion*/
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
#media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
.modal-content{
background-color: #222;
border-color: #222;
border-radius: 0;
}
.modal-header{
border-bottom: 0px !important;
}
.modal-backdrop{
background-color: red;
}
.customClass {
background-color: #D21C1C;
border-radius: 5px;
margin:auto;
width: 50%;
}
.customClass .img-ul-upload {
background-color: #222 !important;
}
.customClass .img-ul-clear {
background-color: #222 !important;
}
.customClass .img-ul-drag-box-msg {
color: purple !important;
}
.customClass .img-ul-container {
background-color: #222 !important;
}

Answer 1

Solved!
The issue seems to have been how the divs were organised in the app-component.html:
Going from:
<div class="contain">
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<app-footer></app-footer>
to this:
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
fixed the issue.