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 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;
}
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 -->
this is the first time I write here :D I'm currently learning angular 7 and I had the same problem... So I created my own solution (probably not the best but I think it can help some1).
HTML:
<div class="main-root">
<header></header>
<router-outlet></router-outlet>
<footer></footer>
</div>
CSS:
html,
body {
height: 100%;
margin: 0;
}
.main-root {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
The link you provided is actually a great example of how to accomplish what it sounds like you're asking for. I've tried to use the elements you mentioned with the necessary CSS below.
<div class="app">
<header>
Header here
</header>
Content isn't long enough to push footer to the bottom.
</div>
<footer>
This is the footer
</footer>
html, body {
/* make sure the body does not have a margin */
margin: 0;
/* this forces the body tag to fill the height of the window */
height: 100%;
}
.app {
/* the .app div needs to be AT LEAST 100% of the height of the window */
min-height: 100%;
/* now that it is 100% the height, we 'pull' the footer up */
/* margin-bottom must be the same height as the footer height below */
margin-bottom: -271px;
}
footer{
/* .set the height of the footer */
height: 271px;
/* just setting a color so you can see the footer */
background: orange;
}
/* the following is not necessary, just showing how a header could be added */
header{
height: 30px;
background: teal;
}
reply to "phen" answer. you can do It some more dynamic to support multi device (when footer height change):
app.component.ts ..... export class AppComponent implements AfterViewInit { clientHeight: number; footerHeight:umber; @ViewChild('footer') footerDiv: ElementRef; constructor() { this.clientHeight = window.innerHeight; } ngAfterViewInit() { this.footerHeight=this.footerDiv.nativeElement.offsetHeight; } } app.component.html <div [ngStyle]="{'min-height': clientHeight-footerHeight + 'px'}"> <app-navbar></app-navbar> <!-- Your Navbar here --> <router-outlet></router-outlet> </div> <app-footer #footer></app-footer> <!-- Your footer here -->
I tried the proposed solution for Angular8 and it didn't work. For some reason, think because of bootstrapping, the style is not applied for "app" tag. So, I assigned an ID to the "app id='main-app'" and changed the style to be applied by #ID. It worked.
#main-app {
display: flex;
flex-direction: column;
min-height: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.