I'm building a project in Angular 2, and I need a sticky footer which always must be at the bottom of the page, not fixed. Example: http://codepen.io/chriscoyier/pen/uwJjr
The structure of 'app' component is like this:
<header-main></header-main>
<router-outlet></router-outlet>
<footer>...</footer>
Probably, the problem is not connected with Angular itself, but with only CSS. However, I tried implementing it like this:
app {
min-height: 100%;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 271px;
}
The result is awful:
The interesting thing is that if I turn off a position of footer in inspector, and turn on again, the footer becomes OK:
SOLUTION:
app {
min-height: 100%;
width: 100%;
margin-bottom: -271px;
display: table;
}
header-main,
router-outlet,
footer{
display: table-row;
}
header-main {
height: 60px;
}
router-outlet {
position: absolute;
}
footer {
height: 271px;
}
< div id = "footer" >This is a footer. This stays at the bottom of the page.
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.
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.
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.
This how I solve sticky footer (not fixed)
app.component.ts
.....
export class AppComponent {
clientHeight: number;
constructor() {
this.clientHeight = window.innerHeight;
}
}
app.component.html
<div [ngStyle]="{'min-height': clientHeight + 'px', 'margin-bottom': '-200px'}">
<!-- 'margin-bootom': '-FooterHeight' -->
<app-navbar></app-navbar>
<!-- Your Navbar here -->
<router-outlet></router-outlet>
<div style="height: 200px"></div>
<!-- 200px is FooterHeight this will push
the footer so it will not overlap if you have very long content -->
</div>
<app-footer></app-footer>
<!-- Your footer here -->
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