如何在 Angular2 应用程序中创建粘性页脚？

Question

无论页脚有多少内容，粘性页脚都会粘在网页底部。如果您在网页的 CSS 样式表中使用 FlexBox 命令，则此问题已解决。所有现代浏览器都支持 FlexBox.

但是，使用 Angular2 构建 Web 应用程序时，我无法应用最简单的 FlexBox 命令！页脚不粘在底部！这是我的 plunker to demonstrate the issue.

在 plunker 应用程序中，style.css 包含一个非常简单的 Flexbox 命令并且它可以工作 - 只需将 index.html 的内容替换为 index1.html 看看粘性页脚在没有 Angular 的情况下是如何工作的。对于 Angular2 应用程序，我使用相同的 style.css 因此我将以下模板添加到应用程序中，清楚地标记 CSS 类 main 和 footer如下。

<div class="main">
  <h2>Hello {{name}}</h2>
</div>
<footer class="footer">
  <h3> this is footer </h3>
</footer>

但是，页脚永远不会粘住。

有没有人能够在 Angular2 中解决这个问题？ Angular2 是否有其他方法提供粘性页脚？

如有任何想法和建议，我们将不胜感激。

Answer 1

在您的代码中包含页脚 CSS。

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

Answer 2

您的问题是您将 site div 定义为弹性容器并将 footer 定位为弹性项目，但是当您引入 angular my-app 元素，footer 不再是 site 的子元素（它是 my-app 的子元素，因此是 site 的孙元素）。

弹性项目需要是弹性容器的子项。

Answer 3

您可以像这样创建页脚组件：

@Component({
  selector: 'app-footer',
  templateUrl: './app-footer.component.html',
  styleUrls: ['./app-footer.component.scss']
})
export class FooterComponent implements  {

}

并在 app.component.html 中添加 router-outler 标签下的页脚

    <div>
      <router-outlet></router-outlet>
      <app-footer></app-footer>
    </div>

如何在 Angular2 应用程序中创建粘性页脚？

How to create a sticky footer in an Angular2 app?

css

angular

sticky-footer