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>

Answer 2

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.

Answer 3

I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough. Try something like this

html {
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
}

.main {
   min-height: 100%;
   padding-bottom: 55px;
}

#footer {
  position: absolute;
  bottom: 0;
}

Also remove margins and padding-top from .main block styles