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

原文由 Nursultan Bagidolla 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 phen 发布，翻译遵循 CC BY-SA 3.0 许可协议