CODEWITHSUNDEEP
cssangularmaterialize
Wouter van Acht
Wouter van Acht

Reputation: 179

Materialize CSS & Angular 5 - Sticky Footer

I am trying to get my footer to be stickied to the bottom when the page's content doesn't reach the end of the screen.

I am building an Angular 5 application.

I added the <header>, <main> and <footer> tags to my app.component.html.

I tried adding the required css from Materialize everywhere. In the global css file, the app.component css file, even in the Materialize css. I just don't know what I'm doing wrong.

Here is my app.component.html:

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

The app-footer starts with this:

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

I'd like to know where to put the css required for my footer to go to the bottom of the page.

Upvotes: 0

Views: 554

Answers (3)

Rafael Zasas
Rafael Zasas

Reputation: 993

David Ortiz's answer worked for me!

However
It should be noted that the chunk:

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

had to be placed in the sitewide styles.css file for it to work.

Upvotes: 0

David Moreno Ortiz
David Moreno Ortiz

Reputation: 1

In your AppComponent.html: 

<app-navbar></app-navbar>

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

<app-footer></app-footer>

and change your style.css:

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

Upvotes: 0

Clovis Ignacio Ferreira
Clovis Ignacio Ferreira

Reputation: 141

A fast answer is to put the html that is inside your FooterComponent in the index.html. Surround your tag with the tag, like this example:

<body>

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

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

</body>

(remember to erase your html inside your FooterComponent)

Upvotes: 1

Related Questions