CODEWITHSUNDEEP
htmlcssangularjs
Nursultan Bagidolla
Nursultan Bagidolla

Reputation: 501

Sticky footer at the bottom in Angular 2

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: enter image description here

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

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

Upvotes: 16

Views: 37706

Answers (6)

mdreds
mdreds

Reputation: 1

I tried the proposed solution for Angular8 and it didn't work. For some reason, think because of bootstrapping, the style is not applied for "app" tag. So, I assigned an ID to the "app id='main-app'" and changed the style to be applied by #ID. It worked.

#main-app {
 display: flex;
 flex-direction: column;
 min-height: 100%;
}

Upvotes: 0

m0rem0ney
m0rem0ney

Reputation: 41

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

Upvotes: 4

vahid mehrjooei
vahid mehrjooei

Reputation: 69

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

Upvotes: 0

phen
phen

Reputation: 105

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

Upvotes: 8

Russell Stout
Russell Stout

Reputation: 66

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

Upvotes: 3

Jagdish Parmar
Jagdish Parmar

Reputation: 599

See Example: Link

Add CSS:

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

Upvotes: 0

Related Questions