I have already done extensive research on Google and this board, trying numerous solutions without success. My goal is to have a footer positioned at the bottom of every site, even if the site does not reach the bottom of the viewport.
Using Angular4 and Bootstrap4, below is my current code snippet (split into two templates due to limitations):
<mat-toolbar color="primary" class="mat-elevation-z2" *ngIf="auth.isLoggedIn()">
<button mat-button class="pull-left" [disabled]="!auth.isLoggedIn()" (click)="sidenav.toggle()">
<i class="fa fa-navicon" aria-hidden="true"></i> PowerPals
</button>
<div *ngIf="auth.isLoggedIn()">
<button mat-button class="pull-left" (click)="showProfile()">
<i class="fa fa-user" aria-hidden="true"></i><span class="d-none d-sm-inline"> {{auth.username$ | async}}</span>
</button>
<button id="logoutButton" mat-button class="pull-right" (click)="logout()">
<i class="fa fa-power-off" aria-hidden="true"></i><span class="d-none d-sm-inline"> LOGOUT</span>
</button>
</div>
<mat-sidenav-container (window:resize)="onResize($event)" [style]="mainStyle.getValue()">
<mat-sidenav *ngIf="auth.isLoggedIn()" [mode]="sidenavMode" [opened]="true" #sidenav class="sidenav-shadow">
<app-nav-pane *ngFor="let nav of (app.navmods$ | async)" [content]="nav"></app-nav-pane>
</mat-sidenav>
<div class="container-fluid">
<div class="row" style="flex: 1 0 auto;">
<div class="col-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer>
<div class="footer-copyright">
Footer
</div>
</footer>
Currently facing an issue where the footer is not positioned at the bottom of each page or viewport as intended. The layout looks like this:
https://i.sstatic.net/P7iyB.png
I am seeking a solution to ensure that the footer consistently stays at the bottom. None of the CSS solutions I have come across have provided satisfactory results.
Any assistance or suggestions would be greatly appreciated :-)