html - Angular 2 粘性页脚实现

Question

我希望我的页脚成为粘性页脚并尝试遵循 css tricks negative margin trick，但没有奏效。我试图在下面的 plunker 代码中模拟我的 angular2 应用程序。我希望贴纸不是固定的而是粘性的，并在主要部分中有更多内容时转到底部。请注意，页脚显示在主要部分的数据上方。

http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts

应用程序组件:

<nav-bar></nav-bar>
  <section class="main">
    <div class="main-container">
      Display my router-outlet here          
      <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>

    </div>
  </section>
  <footer-component></footer-component>

感谢任何修复和向下移动页脚的帮助。

Answer 1

你仍然可以按照提到的这个例子 https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

只需将此代码添加到 styles.scss

html, 
body {
  height: 100%;
}

在你的app.component.scss

:host {
  display: flex;
  min-height: 100%; // used percent instead of vh due to safari bug.
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

在你的app.component.html

<header>...</header>

<main class="Site-content">..</main>

<footer>...</footer>