Pie de página adhesivo en la parte inferior en angular 2

Estoy construyendo un proyecto en Angular 2, y necesito un pie de página adhesivo que siempre debe estar en la parte inferior de la página, no corregido. Ejemplo: http://codepen.io/chriscoyier/pen/uwJjr

La estructura del componente ‘aplicación’ es así:

  
...

Probablemente, el problema no esté relacionado con Angular en sí, sino solo con CSS. Sin embargo, traté de implementarlo así:

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

El resultado es horrible: enter image description here

Lo interesante es que si desactivo una posición de pie de página en el inspector y vuelvo a encenderlo, el pie de página se convierte en OK: enter image description here

SOLUCIÓN :

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

Así como resuelvo el pie de página adhesivo (no fijo)

 app.component.ts ..... export class AppComponent { clientHeight: number; constructor() { this.clientHeight = window.innerHeight; } } app.component.html 

El enlace que proporcionó es en realidad un gran ejemplo de cómo lograr lo que parece que está pidiendo. Intenté utilizar los elementos que mencionaste con el CSS necesario a continuación.

Aquí hay un ejemplo de trabajo .

 
Header here
Content isn't long enough to push footer to the bottom.
This is the 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; } 

Ver Ejemplo: Enlace

Agregar CSS:

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

responder a la respuesta “phen”. puede hacerlo de una manera más dinámica para admitir múltiples dispositivos (cuando cambia la altura del pie de página):

 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