How to implement the classic "sticky footer" with angular-material?

There's no need for a bottom-sheet or something like it.Leverage the flexbox behavior and you are good to go:

1. Use layout="column" and layout-fill attributes on your main wrapper (can be your body tag).
2. Create your sections: header, main and footer.
3. Use flex attribute on your main.

Check my example, based on @kuhnroyal pen.

Code | Full Page

You can get this to work with a small workaround.

• use min-height: calc(100vh - 176px) on your main element, (176px = 2*88px for the md-toolbars)
• remove the layout='column' from the root div
• remove the layout-fill layout='column' from the body

I replaced the material css/js with CDN version 0.8.3 since my IE10 would crash with that amount of CSS/JS in a Codepen.

I tested this on Chrome, Firefox and IE10 - seems to work.

http://codepen.io/anon/pen/azgdOZ

So I am just experiementing with angular-material but what I did for this was

<div layout="column" layout-fill>   <md-toolbar class="md-default-theme">   <!-- your stuff -->   </md-toolbar>   <md-content layout-fill role="main">      <!-- your main areas -->   </md-content>   <md-bottom-sheet>      <div>I am a sticky footer</div>   </md-bottom-sheet></div>

I have not experimented enough to know for sure whether this does everything they way I want, but is so far looks promising. Note if you content is not constrained, it would likely continually push the bottom-sheet down. if you used a overflow-y: auto on the md-content it might work (I don't have enough of my app built yet to test)