I needed to set up a sticky footer as part of my Angular and Material Design experiment. You would not believe how many resource I could find (some of them listed below)!

Unfortunately, most of them had a problem; blank page looked fine (header and footer in the right places), but the page populated through angular would not refresh the footer's position, it remaining at the bottom of the page. Not nice. The solution I found that works is the one from Ryan Fait which I'll paste in below for quick reference:

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer,
.push {
  height: 4em;
}

and

<html>
  <head>
    <link rel="stylesheet" href="layout.css" ... />
  </head>
  <body>
    <div class="wrapper">
      <p>Your website content here.</p>
      <div class="push"></div>
    </div>
    <div class="footer">
      <p>Copyright (c) 2008</p>
    </div>
  </body>
</html>

All credit for this goes to its author!

References

All references below (and others you may find) work for static content nicely. However, the instant I placed generated content, the footer misbehaved (it stayed in the same place as if the page were blank). Only solution I could find to work was the first one from the list.

These are some of the reference points I could find.

HTH,