Question

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

我尝试过：

https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/
stackoverflow中的一些解决方案
通过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，如您所见，我的页脚不粘在页面底部。

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

Answer 1

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

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

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中指定的类。否则，将无法应用CSS。

编辑

我在index.html文件的html标记上添加了所需的类，并重构app.component.html

Answer 2

感谢@avcajaraville的回答。不幸的是，当我尝试H-100时，我错过了它，但是我没看到i：/

与此同时，我找到了解决方案。

我将此CSS添加到了我的app-root组件中：

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

和我的容器类的flex-grow: 1;。

Answer 3

如果您只想使用bootstrap实用程序类而不使用app-root的组件css或通过：host自定义css编写自定义css，则可以这样做

在您的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网站上的粘性页脚示例，则需要将实用程序类放到app-root而不是body上，并确保使用h将body元素的高度设置为100％ -100（在html元素上也需要h-100！）

Answer 4

这将始终计算总高度，设置对我来说202px的内容div的最小高度是完美的。这会将页脚推到底部。

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


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

带有bootstrap4的Angular 7粘性页脚

4 个答案: