Desarrollo HTML
  1. Desarrollo HTML
  3. Pie de página adhesivo en la parte inferior en angular 2

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
Intereting Posts
Romper el cambio de variable en Chrome usando AngularAplicar una clase específica o por defecto usando ng-class¿Cómo eliminar los valores vacíos en menú desplegable utilizando ng-option en angular js?Eliminar datos de base de fuego que se muestran como una tabla usando AngularJSCómo configurar el css de li: before con ng-styleLlamar a $ window.print () en angularjs hace que la vista previa de impresión muestre una página en blancoEmpuje los datos json a la matriz existente en js angulares¿Cómo deshabilitar la seguridad web cuando se usa angularjs en Android webview?