html - Angular 2底部的粘性页脚

Question

我正在 Angular 2 中构建一个元素，我需要一个必须始终位于页面底部的粘性页脚，而不是固定的。示例:http://codepen.io/chriscoyier/pen/uwJjr

'app'组件的结构是这样的:

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

问题可能与 Angular 本身无关，而仅与 CSS 有关。但是，我尝试这样实现它:

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

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

结果很糟糕:

有趣的是，如果我在检查器中关闭页脚位置，然后再次打开，页脚就可以了:

解决方案:

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

这是我解决粘性页脚的方法(未修复)

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