Sticky footer in Angular 2 Material

Question

I have been searching and searching for about 3 hours now because I didn\'t want to have to ask, but how can I keep a \'footer\' variable at the bottom but not like fixed at the

Answer 1

An approach that uses Flexbox:

When we utilize Flexbox we can get a cleaner solution. Also my solution will cover that the first component of your page should take 100% of the height. This is often needed to position elements appropriately or to work with backgrounds. The code matches the current version of Material 2 - at the time of writing this is 2.0.0-beta.12.

Markup:

  
    
       Foo
       Bar
    
  

  

    

      
        
          menu
        
        Your Toolbar
      
    
    

      
    
    

      Your sticky footer with a variable height.
    
  

Styles:

/*
 * Actual Sticky Footer Styles
 */
.all-wrap {
  min-height: 100vh;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}


/*
 * Make the Component injected by Router Outlet full height:
 */
main {
  display: flex;
  flex-direction: column;
  > *:not(router-outlet) {
    flex: 1;
    display: block;
  }
}

You can find a more detailed description in a Blogpost that I wrote since I was unhappy with the solution I found here. There is also a demo.