Question

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

但是，使用Angular2构建Web应用程序，我无法应用最简单的 FlexBox 命令！页脚不会粘到底部！这是我的。

在plunker应用中，curl --interface '2a02:c207:2010:1077::2' http://example.com curl: (45) bind failed with errno 99: Cannot assign requested address包含一个非常简单的 Flexbox 命令，它可以正常工作 - 只需将style.css的内容替换为index.html，然后查看粘性页脚在没有Angular存在的情况下工作得很好。使用Angular2应用程序时，我使用相同的index1.html，因此我将以下模板添加到应用程序中，清楚地标记了CSS类style.css和main，如下所示。

footer

然而，页脚从不粘。

有没有人能够在Angular2中解决这个问题？ Angular2有另一种提供粘性页脚的方法吗？

非常感谢任何想法和想法。

Answer 1

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

flex项目需要是flex容器的子项。

Answer 2

在代码中包含页脚CSS。

＆＃13;

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

＆＃13;

Answer 3

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

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

}

并在app.component.html中添加页脚路由器标记

下的页脚

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

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

3 个答案: