I have been searching and searching for about 3 hours now because I didn't want to have to ask, but how can I keep a 'footer' variable at the bottom but not like fixed at the bottom, so if the content I have is very small it won't just sit halfway in the page but if I have lots of information it won't lock right at the bottom of the page and sit there over data while you scroll
I have tried several ways including this: https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html and most questions related to this I've tested and failed with or don't seem to work at all.
Heres my current code:
<div class="content">
<app-navbar></app-navbar>
<app-footer></app-footer>
</div>
and the <app-content></app-content>
is within the navbar because the navbar controls a fullpage sidenav.
The whole app-navbar looks like this:
<mat-sidenav-container fullscreen>
<mat-sidenav mode="push" #sidenav>
<div fxLayout="column">
<mat-toolbar fxLayoutAlign="center center" color="primary">
<button mat-icon-button routerLink="/home" (click)="sidenav.close()">
<mat-icon>keyboard_backspace</mat-icon>
</button>
</mat-toolbar>
<button mat-button routerLink="/dashboard" (click)="sidenav.close()" >Information</button>
<button mat-button routerLink="/second" (click)="sidenav.close()" >Web tools</button>
</div>
</mat-sidenav>
<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
<button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-xs>
<mat-icon>menu</mat-icon>
</button>
<div fxLayout="row">
<button fxLayout="flex-shrink: 0;" mat-button class="title" style="font-size: 25px;">{{this.title}}</button>
<button fxShow="false" fxShow.gt-xs mat-button routerLink="/dashboard" [matMenuTriggerFor]="infoMenu">Information</button>
<button fxShow="false" fxShow.gt-xs mat-button routerLink="/second" [matMenuTriggerFor]="toolsMenu">Web tools</button>
</div>
<!-- fxFlex will fill the empty space and push the following items to the right -->
<div fxFlex></div>
<button mat-icon-button>
<mat-icon>face</mat-icon>
</button>
</mat-toolbar>
<app-container></app-container>
</mat-sidenav-container>
And the footer is just a super basic component that looks like this:
<mat-toolbar>
<div class="container">
<span>this is a toolbar</span>
</div>
</mat-toolbar>
Only styling ive applied so far is this:
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
.title {
font-family: "Comfortaa";
}
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
Which is in the global style.css file.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
In Angular we can create a footer by making use of 'mat-sidenav-container' it is a container inside which we can place all our compounds that needs to be there on the page for the user. The footer div for the tag will go at the end of this tag, with few configurations inside the CSS file itself.
An approach that uses Flexbox:
When we utilize Flexbox we can get a cleaner solution. Also my solution will cover that the first component of your page should take 100% of the height. This is often needed to position elements appropriately or to work with backgrounds. The code matches the current version of Material 2 - at the time of writing this is 2.0.0-beta.12.
Markup:
<mat-sidenav-container class="all-wrap" fullscreen>
<mat-sidenav #sidenav>
<mat-list>
<mat-list-item [routerLink]="['/']"> Foo</mat-list-item>
<mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item>
</mat-list>
</mat-sidenav>
<div class="page-wrap">
<header role="banner">
<mat-toolbar color="primary">
<button
type="button"
mat-icon-button
(click)="sidenav.open()"
title="Open sidenav">
<mat-icon>menu</mat-icon>
</button>
Your Toolbar
</mat-toolbar>
</header>
<main class="content">
<router-outlet></router-outlet>
</main>
<footer>
Your sticky footer with a variable height.
</footer>
</div>
</mat-sidenav-container>
Styles:
/*
* Actual Sticky Footer Styles
*/
.all-wrap {
min-height: 100vh;
}
.page-wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
/*
* Make the Component injected by Router Outlet full height:
*/
main {
display: flex;
flex-direction: column;
> *:not(router-outlet) {
flex: 1;
display: block;
}
}
You can find a more detailed description in a Blogpost that I wrote since I was unhappy with the solution I found here. There is also a demo.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With