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

Answer 2

请参阅示例：链接

添加CSS：

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