我正在学习 angular7，我会创建一个粘性页脚。我已经尝试了很多解决方案。
我试过了:
- > https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/
- stackoverflow 中的一些解决方案
- 一些通过谷歌搜索找到的解决方案(如 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>
© 2019 - Zackna
</footer>
编辑:我用@avcajaraville 的答案更新我的代码，我已经尝试过但删除了 ^-^。还有 my result ，如您所见，我的页脚没有粘在页面底部。
是否存在引导原生解决方案？我的页脚没有确定的高度。我需要做什么才能实现我的目标？
最佳答案
感谢@avcajaraville 的回答。 不幸的是，我在尝试时错过了 h-100 类，我没有看到 i:/
同时，我找到了解决办法。
我将此 CSS 添加到我的应用程序根组件中:
app-root {
height: 100vh;
display: flex;
flex-direction: column;
}
和一个 flex-grow: 1; 到我的容器类。
关于css - 带有 bootstrap4 的 Angular 7 粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58181863/