After trying numerous solutions like flexbox and positioning, I still can't figure out how to place my footer component at the bottom before the container component is rendered. With an asynchronous data spinner loading above it, the layout looks quite messy with both elements visible simultaneously. Ideally, I want the footer to always be at the bottom but not fixed, and hidden from view until needed. I've searched and experimented using How do you get the footer to stay at the bottom of a Web page? without success.
// app.component.html
<app-header></app-header>
<app-planet-data></app-planet-data>
<app-footer></app-footer>
// footer.component.html
<nav class="navbar navbar-dark bg-dark">
<h6 class="m-2 mx-auto text-muted">Footer</h6>
</nav>
// header.component.html
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<h3 class="m-2">The Red Planet Rovers</h3>
<ul class="nav justify-content-end">
<button pButton type="button" label="Image of the Day"></button>
<button pButton type="button" label="Image Gallery"></button>
</ul>
</nav>
// planet-data.component.html
<app-loading *ngIf="loading"></app-loading>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>