Sticky footer at the bottom in Angular 2

Related searches

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:

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

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;
}

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 -->

Pure Bootstrap sticky footer with flex and Angular, I can't seem to get a "proper" sticky footer going. solve the problem but it also doesn't stick to the bottom of the screen if there isn't enough content on the page � The footer should float at the bottom of the main section but be sticky to the bottom when there is no content. It seems that I can do one or the other but not both. With this method the toolbar is fixed but the footer isn't sticky.

The link you provided is actually a great example of how to accomplish what it sounds like you're asking for. I've tried to use the elements you mentioned with the necessary CSS below.

Here's a working example.

<div class="app">
    <header>
        Header here
    </header>
    Content isn't long enough to push footer to the bottom.
</div>
<footer>
    This is the footer
</footer>
html, body {
    /* make sure the body does not have a margin */
    margin: 0;
    /* this forces the body tag to fill the height of the window */
    height: 100%;
}
.app {
    /* the .app div needs to be AT LEAST 100% of the height of the window */
    min-height: 100%;
    /* now that it is 100% the height, we 'pull' the footer up */
    /* margin-bottom must be the same height as the footer height below */
    margin-bottom: -271px; 
}
footer{
    /* .set the height of the footer */
    height: 271px;
    /* just setting a color so you can see the footer */
    background: orange; 
}

/* the following is not necessary, just showing how a header could be added */
header{
    height: 30px;
    background: teal;
}

Sticky footer : Angular2, 2 0. There is a class or something else to pin a div (footer) to the bottom of the page without knowing Hi, have you tried using .fixed-bottom class from navbars ? The footer should float at the bottom of the main section but be sticky to the bottom when there is no content. It seems that I can do one or the other but not both. With this method the toolbar is fixed but the footer isn’t sticky. It butts up to the toolbar when the main section is empty.

this is the first time I write here :D I'm currently learning angular 7 and I had the same problem... So I created my own solution (probably not the best but I think it can help some1).

HTML:

<div class="main-root">
    <header></header>
    <router-outlet></router-outlet>
    <footer></footer>
</div>

CSS:

html,
body {
    height: 100%;
    margin: 0;
}

.main-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

Pin footer to the bottom without fixed-height, I would like to have the footer as sticky and go to the bottom when the main block has lot of data to display. Any help is appreciated. Author. In Angular you have the issue that the app component usually contains the content and footer and needs to be full height. The easiest way to solve this issue is by making it position:absolute and setting left,right,top,bottom to 0.

See Example: Link

Add CSS:

.page-wrap{position: relative;}
#add{position: absolute; bottom: 160px;}

Sticky footer for angular 2 app, This would place your footer at the bottom (with 60px for placing the element itself, if it is longer you may have to adjust it). You need to have css property "position:absolute" on the footer element. When window is resized or new elements appear at run time, it still should be on the bottom.

reply to "phen" answer. you can do It some more dynamic to support multi device (when footer height change):

app.component.ts
.....
export class AppComponent implements AfterViewInit {  
   clientHeight: number;
   footerHeight:umber;
   @ViewChild('footer') footerDiv: ElementRef;

 constructor() {
    this.clientHeight = window.innerHeight; 
 }
 ngAfterViewInit() {
    this.footerHeight=this.footerDiv.nativeElement.offsetHeight; 
 }
 }

app.component.html

<div [ngStyle]="{'min-height': clientHeight-footerHeight + 'px'}"> 
    <app-navbar></app-navbar> 
          <!-- Your Navbar here -->
    <router-outlet></router-outlet>
</div>

<app-footer #footer></app-footer> 
<!-- Your footer here -->

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

It works when we sticky the footer at the bottom of the page, and the footer will always stay at the bottom of the page even content is less or more. But the sticky isn’t required always. If the page has good enough content to the full fill the content area according to screen size, then you may don’t need to it.

A sticky footer is a footer that sticks to the bottom of the page, regardless of the amount of content on the page. If a page’s content is shorter than the height of the browser, you end up with a footer that sits near the middle of the page, instead of at the bottom. Flexbox is a great solution for fixing these types of problems.

I also noticed that the sticky footer example flips between min-height: 100vh; in the text and min-height: 100%; in the source Yes, I wanted to use 100vh to show the ideal case in the docs. Though, at this point in time 100% is still needed to deal with some browser bugs (or at least it was when I created the site).

Comments
  • Have any soluting for this ?. I am facing same issue
  • any response . I need ur help
  • THANK YOU SO MUCH FOR POSTING THE SOLUTION <3 <3
  • The min-height: 100%; did the trick for me, I was using height: 100%
  • 'footer' is inside 'app' tag: <app><footer></footer></app>
  • Sticky footers have always been rather tricky. They rely heavily on having just the right HTML layout for one element to at least fill the entire height of the page, and then pull the footer back up into the viewport (using a negative margin bottom). Without changing the HTML, the only other way I could think to make this work would be writing JavaScript that sets height of elements on page load and anytime you resized the window. I would personally favor using HTML/CSS over JavaScript for a sticky footer.