Question

当网页的内容没有到达屏幕的末尾时，我试图让我的页脚粘到底部。

我正在构建一个Angular 5应用程序。

我已将<header>，<main>和<footer>标记添加到app.component.html。

我尝试在所有地方添加Materialise所需的css。在全局css文件中，app.component css文件，甚至在Materialize css中。我只是不知道自己做错了什么。

这是我的app.component.html：

<header>
    <app-navbar></app-navbar>
</header>
<main>
    <div class="container">
        <router-outlet></router-outlet>
    </div>
</main>
<app-footer></app-footer>

app-footer以此开头：

<footer class="page-footer blue darken-2">

我想知道在哪里放置页脚所需的CSS到页面底部。

Answer 1

一个快速的答案是将FooterComponent内部的html放在index.html中。用标签将标签括起来，例如以下示例：

<body>

  <main>
    <app-root></app-root>
  </main>

  <footer>
    <!-- your footer html here -->
  </footer>

</body>

（记住要删除FooterComponent中的html）

Answer 2

在您的AppComponent.html中：

<app-navbar></app-navbar>

<main>
    <div class="row">
        <router-outlet></router-outlet>
    </div>
</main>

<app-footer></app-footer>

并更改您的style.css：

body > app-root { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column;
}
main { 
    flex: 1 0 auto;
}

Answer 3

David Ortiz的回答对我有用！

但是
应该注意的是：

body > app-root { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column;
}
main { 
    flex: 1 0 auto;
}

必须放置在站点范围的styles.css文件中，才能正常工作。

实现CSS＆amp; Angular 5 - Sticky Footer

3 个答案:

David Ortiz的回答对我有用！