Angular 7 个带有 bootstrap4 的粘性页脚

Question

我正在学习 angular7，我会创建一个粘性页脚。我已经尝试了很多解决方案。

我试过了：

https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/
Whosebug 中的一些解决方案
通过 google 搜索找到的一些解决方案（如 this）

没有人为我工作。我不明白为什么，我需要帮助。

删除所有我尝试过的代码后，我得到了这个代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    FooterComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html（只是正文）

<!doctype html>
<html lang="en">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html

<app-menu></app-menu>

<main class="container">
  <router-outlet></router-outlet>
</main>

<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

footer.component.html

<footer>
  &copy; 2019 - Zackna
</footer>

编辑：我用@avcajaraville 的回答更新了我的代码，我已经尝试过但删除了 ^-^。还有 my result，如您所见，我的页脚没有粘在页面底部。

是否存在 bootstrap 本机解决方案？我的页脚没有确定的高度。我需要做什么才能实现我的目标？

Answer 1

根据您的代码示例，您没有添加所需的 classes。

您可以通过模仿您提供的示例中的相同结构来解决此问题：

index.html

<!doctype html>
<html lang="h-100">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html

<app-menu></app-menu>
<main class="container">
  <h1>title</h1>
  <router-outlet></router-outlet>
</main>
<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

我认为这会给你预期的行为。

通常，在使用 CSS 框架时，您需要使用 html 中指定的 classes。否则无法申请CSS。

编辑

我在你的 index.html 文件的 html 标签上添加了需要的 class 并重构了 app.component.html

Answer 2

感谢@avcajaraville 的回答。不幸的是，我在尝试时错过了 class h-100，而且我没有看到 i:/

同时，我找到了解决办法。

我将此 CSS 添加到我的应用根组件中：

app-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

和一个 flex-grow: 1; 到我的容器 class。

Answer 3

如果您只想使用 bootstrap 实用程序 classes 而不是使用 app-root 的组件 css 或自定义编写自定义 css ，则可以使用另一种方法css 通过 :host

在你的 index.html 中执行此操作，

<html class="h-100">
<head>....omitted</html>
<body class="h-100">
    <app-root class="d-flex flex-column h-100"></app-root>
</body>
</html>

回顾一下，如果您使用 Angular 遵循 Bootstrap4 网站上的粘性页脚示例，那么您需要将实用程序 class 放在 app-root 而不是 body 上，并确保只有高度使用 h-100 将 body 元素设置为 100%（在 html 元素上也需要 h-100！！）

Answer 4

这将始终计算总高度，为内容设置最小高度 div 对我来说，202px perfect.This 会将页脚推到底部。

              .main-content {
                  min-height: calc(100vh - 202px);
               }


                  <main>
                      <div class="main-content"></div>
                      <app-footer class="footer"></app-footer>
                 </main>

Angular 7 个带有 bootstrap4 的粘性页脚

Angular 7 sticky footer with bootstrap4

css

bootstrap-4

angular7