css - 如何在 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

您的问题是您将 site div 定义为 flex 容器并将 footer 定位为 flex 元素，但是当您引入 Angular my- app 元素，footer 不再是 site 的子元素(它是 my-app 的子元素，因此是网站)。

flex 元素需要是 flex 容器的子元素。