Angular Material fixed toolbar AND sticky footer

Question

I have been beating my head against this issue for some time now and sort of came up with a solution. I would like a fixed toolbar (navbar) as well as a sticky (floating) fo

Answer 1

You should use md-content as scroll wrapper, put your content inside with flex and the footer with flex="none". It will always stick to the bottom of the md-content container since that has a CSS overflow: auto. angular-material layout children

  
    

      HEADER
      
      onOff
      
      half/full
    
  

  
    

      
body {{card.title}}
    
    

      
footer item
    
   

codepen