Angular 2中底部有粘性页脚 [英] Sticky footer at the bottom in Angular 2

问题描述

我正在Angular 2中构建一个项目，并且我需要一个粘性页脚，它总是在页面的底部，而不是固定的。例如：

有趣的是，如果我在检查器中关闭页脚的位置并再次打开，页脚就会变为OK：
< a href =https://i.stack.imgur.com/v8TLz.png =noreferrer>

解决方案：

  app {
 min-height：100％; 
宽度：100％; 
 margin-bottom：-271px; 
 display：table; 
} 
 
 header-main，
 router-outlet，
 footer {
 display：table-row; 
} 
 
 header-main {
 height：60px; 
} 
 
 router-outlet {
 position：absolute; 
} 
 
页脚{
 height：271px; 
} 
  

解决方案

（不固定）

  app.component.ts 
 ..... 
导出类AppComponent { 
 clientHeight：number; 
 
构造函数（）{
 this.clientHeight = window.innerHeight; 
} 
} 
 
 app.component.html 
 
< div [ngStyle] ={'min-height'：clientHeight +'px '，'margin-bottom'：'-200px'}> 
 <！ - 'margin-bootom'：'-FooterHeight' - > 
< app-navbar>< / app-navbar> 
 <！ - 您的Navbar在这里 - > 
< router-outlet>< / router-outlet> 
< div style =height：200px>< / div> 
 <！ -  200px为FooterHeight，这会推送
页脚，所以如果你有很长的内容，它将不会重叠 - > 
< / div> 
 
< app-footer>< / app-footer> 
 <！ - 您的页脚在这里 - > 
  

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:

The interesting thing is that if I turn off a position of footer in inspector, and turn on again, the footer becomes 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;
}

解决方案

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

这篇关于Angular 2中底部有粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！