Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sticky footer at the bottom in Angular 2

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: enter image description here

The interesting thing is that if I turn off a position of footer in inspector, and turn on again, the footer becomes OK: enter image description here

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;
}
like image 836
Nursultan Bagidolla Avatar asked Feb 12 '16 05:02

Nursultan Bagidolla


People also ask

How do you place the footer at the bottom of the page in angular?

< div id = "footer" >This is a footer. This stays at the bottom of the page.

How do I make my bottom footer sticky?

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.

How do I stick footer to the bottom when page content is less?

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.

Why is the footer sticky?

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.


1 Answers

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 -->
like image 126
phen Avatar answered Oct 14 '22 05:10

phen