Angular 2 sticky footer impementation

Question

I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.

http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts

app.component:

<nav-bar></nav-bar>
  <section class="main">
    <div class="main-container">
      Display my router-outlet here          
      <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>

    </div>
  </section>
  <footer-component></footer-component>

Any help to fix and move the footer down is appreciated.

Answer 1

You can still follow this example mentioned by https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Simply add this code to styles.scss

html, 
body {
  height: 100%;
}

In your app.component.scss

:host {
  display: flex;
  min-height: 100%; // used percent instead of vh due to safari bug.
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

In your app.component.html

<header>...</header>

<main class="Site-content">..</main>

<footer>...</footer>