Angular 2 sticky footer impementation

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>

There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways.

For that to work, you would need to:

• Remove absolute positioning of both the footer and the content.
• Remove default top and bottom margins from body.
• If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport).

Here is an implementation of your Angular2 app with a sticky footer.

The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.