I've implemented a page footer in the following way.
HTML
<footer class="app-footer-main">
<section class="app-footer-items">
...
</section>
</footer>
Styles
.app-footer-main {
background-color: black;
}
.app-footer-items {
position: relative;
display: flex;
font-size: small;
justify-content: center;
}
I would like this footer to be positioned at the bottom of each page within the application. If the content on the page is lengthy, I want to be able to scroll down and see the footer at the end of the page.
The HTML below renders the main content of the application with the embedded footer.
<mat-sidenav-container fullscreen class="sidenav-container">
<!-- Collapsible side content -->
<mat-sidenav #sidenav [mode]="'side'" class="navbar" role="navigation">
<mat-nav-list>
...
</mat-nav-list>
</mat-sidenav>
<!-- End Collapsible side content -->
<!-- Main Content Area -->
<div class="main-content">
<div class="mat-app-background">
<!-- Routed view -->
<router-outlet></router-outlet>
</div>
</div>
<!-- End Main Content Area -->
<app-footer #footer></app-footer>
</mat-sidenav-container>
Main content style:
.main-content {
padding: {
top: 0;
left: 15px;
right: 15px;
bottom: 0;
}
@include breakpoint($narrow-devices) {
padding: {
left: 15px;
right: 15px;
}
}
height: 100%;
overflow: auto;
}
:host ::ng-deep .mat-sidenav-container[fullscreen] {
top: 55px;
@include breakpoint($narrow-devices) {
top: 64px;
}
}
// :host /deep/ is used to allow styling child components when using emulated view encapsulation.
:host ::ng-deep .mat-sidenav-content {
transform: none !important;
}
.main-content {
& ::ng-deep .outlet,
& ::ng-deep .maxed-width {
@include breakpoint($narrow-devices) {
max-width: $page-max-width;
margin: {
left: auto;
right: auto;
}
}
}
}
.sidenav-container {
flex: 1;
}
The issue with this setup is that there are two scrollbars on the page, as shown in the screenshot linked below. One scrollbar is for the main content area and the other is for the footer. How can I resolve this problem?