web-dev-qa-db-fra.com

Pied de page collant au bas de Angular 2

Je construis un projet dans Angular 2, et j’ai besoin d’un pied de page collant qui doit toujours figurer au bas de la page et non pas fixe Exemple: http://codepen.io/chriscoyier/pen/uwJjr

La structure du composant 'app' ressemble à ceci:

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

Probablement, le problème n'est pas lié à Angular lui-même, mais uniquement à CSS. Cependant, j'ai essayé de l'implémenter comme ceci:

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

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

Le résultat est affreux:  enter image description here

La chose intéressante est que si je désactive une position de pied de page dans Inspector et que je la rallume, le pied de page devient 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;
}
htmlcssangularjs
9
Nursultan Bagidolla

Voici comment je résous le pied collant (non corrigé)

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

Le lien que vous avez fourni est en fait un excellent exemple de la façon dont vous obtenez ce que vous demandez. J'ai essayé d'utiliser les éléments que vous avez mentionnés avec les CSS nécessaires ci-dessous.

Voici un exemple de travail .

<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;
}
2
Russell Stout

Voir Exemple: Lien

Ajouter CSS:

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

répondre à "phen" réponse. vous pouvez le faire plus dynamique pour prendre en charge plusieurs périphériques (lorsque la hauteur du pied de page 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 -->

0
vahid mehrjooei