Sticky Footer am unteren Rand in Angular 2

Question

Ich baue ein Projekt in Angular 2, und ich brauche eine klebrige Fußzeile, die immer am unteren Rand der Seite sein muss, nicht behoben. Beispiel: http://codepen.io/chriscoyier/pen/uwJjr

Die Struktur der 'App' Komponente ist wie folgt:

<header-main></header-main> 
<router-outlet></router-outlet> 
<footer>...</footer> 

Wahrscheinlich ist das Problem nicht mit kantigem selbst verbunden ist, aber mit nur CSS. Allerdings habe ich versucht, es so Umsetzung:

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

footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 271px; 
} 

Das Ergebnis ist schrecklich:

Das Interessante daran ist, dass, wenn ich drehe eine Position der Fußzeile in Inspektoren aus und wieder ein, die Fußzeile wird 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; 
} 

Answer 1

Siehe Beispiel: Link

Add CSS:

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

Answer 2

Der Link zur Verfügung gestellt Sie ist eigentlich ein gutes Beispiel dafür, wie man zu erreichen, was es klingt, nach dem Sie fragen. Ich habe versucht, die Elemente, die Sie erwähnt haben, mit dem notwendigen CSS unten zu verwenden.

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

Answer 3

Diese, wie ich sticky Footer lösen (nicht fixiert)

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

Answer 4

Antwort Antwort auf "Phen". Sie können es einige weitere dynamische Multi-Gerät (wenn Fußzeilenhöhe ändern) zu unterstützen:

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