I am currently learning angular7 and I have been struggling to create a sticky footer. Despite trying multiple solutions, none seem to work for me.
Here are some of the solutions I have attempted:
- https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/
- Various solutions from stackoverflow
- Other solutions found through Google search (such as this one)
Unfortunately, none of these options have worked for me and I am unsure why. I am in need of assistance to resolve this issue.
Below is the code I have after removing all the unsuccessful attempts:
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 (just the body)
<!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>
Edit: I updated my codes with @avcajaraville answer that I had previously tried but removed. Here is my result, demonstrating that my footer is still not sticking to the bottom of the page.
I am wondering if there is a native bootstrap solution available? Since my footer does not have a fixed height, what steps do I need to take to achieve my desired outcome?