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

【问题标题】：How to create a sticky footer in an Angular2 app?如何在 Angular2 应用程序中创建粘性页脚？
【发布时间】：2017-01-26 15:08:18
【问题描述】：

无论页脚有多少内容，粘性页脚都会粘在网页底部。如果您在网页的 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 是否有另一种方式来提供粘性页脚？

任何想法和想法将不胜感激。

【问题讨论】：

标签： css angular sticky-footer

【解决方案1】：

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

flex 项必须是 flex 容器的子项。

【讨论】：

啊，好的，谢谢@SimonFox！那么我可以在 style.CSS 中设置my-app 的样式如下吗？ my-app { min-height: 100%; display: flex; flex-direction: column; } 我将它添加到 style.css。此外，我在 style.css 中有以下内容。 html { height: 100%; } .main { flex: 1; } 但是，页脚仍然不粘。它出现在的正下方，在它和页面底部之间留有很大的空白。
我得到了这个工作。我将html { height: 100%; } 修改为html, body { height: 100%; }。我认为这里甚至不需要 html。感谢@Simon 指出所有角度指令都是根指令 my-app 的子指令。现在，我有 <body> 与孩子 <my-app> 与孩子 <div main> 和 <footer> 和弹性框规则按预期工作。

【解决方案2】：

在代码中包含页脚 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>

【讨论】：

您的建议没有什么问题 (1) 我正在专门寻找使用 Angular2 框架的解决方案。如果您查看我的 plunker 演示，您将看到 flexbox CSS 在 Angular2 应用程序中似乎没有任何效果。我正在寻找任何解决方案，只要它在 Angular2 应用程序 (2) 您的页脚 CSS 具有固定高度。我需要页脚高度是动态的。使用我的 plunker 演示，如果简单地将 index.html 的内容替换为 index1.html，我已经有了更好的解决方案。同样，我需要的是 Angular2 解决这个问题。谢谢你的帮助..

【解决方案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>

【讨论】：

仅仅通过将<router-outlet> 和<app-footer> 包装在<div> 中并不能解决手头的问题。您的代码在哪里保证页脚粘性？一切都是为了了解如何设置 CSS 样式，尤其是使用 flex CSS，而您还没有在您的解决方案中展示这一点。无论如何，我已经解决了这个问题，但感谢您的帮助:)