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.

Trillion

Not exactly sure what your goals are, but your styles for class "main" have an absolute position. – Leaved

If I remove it, then the text is shown beneath the navbar section. Thanks! – Trillion

Answer 1

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.

Neall

Sorry, but I don't want the footer to be fixed but sticky. It should be placed down the page when there is more content. I will update my question. – Trillion

I am accepting this answer, although in my real app once I remove position:absolute the navbar section is pushed down and app looks clumsy. Guess since there is more to the css used in the real app (grids, etc) – Trillion

Answer 2

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>

Standford

Thanks, i'm glad it helped :) – Standford

I think app.component.html should be this way <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> can you update the answer to meet this case ? – Luciferase

Thats one way to do it to. But it is the same thing as the one i mentioned already. You have just turned header and footer as components. – Standford

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

Tutelary

Thanks, but if I remove the absolute position from main, then the text is displayed beneath navbar section. – Trillion

What text? .main block text. You can remove margin-top and paddint-top from .main block – Tutelary

Yes, after removing them the top of the main block text goes beneath the navbar section. – Trillion

Are you sure you delete position:absolute for .main block? I played around with you plunker and It works for me. – Tutelary

Yes, I just removed the position:absolute from .main css style and the body content "Display my router here" went beneath the header. – Trillion

Answer 4

You just have to edit 2 files:

index.html:

 <!-- Full height body -->
    <body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
      <app-root class="d-flex flex-column h-100"></app-root>
    </body>

app.component.html:

<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>

Varion