Make footer stick at bottom of the page for short content

app/assets/stylesheets/base.sass

@@ -22,10 +22,10 @@ body
 
 .main
   background-color: $background-color
-  min-height: 500px
 
   > div:first-child
     margin-top: 20px
+    // this ^^^ breaks footer (scrolling)
 
 h1, h2, h3
   font-family: "Source Sans Pro", sans-serif

app/assets/stylesheets/footer.sass

@@ -1,3 +1,15 @@
+html, body
+  height: 100%
+
+body > .main
+  min-height: 100%
+  height: auto !important
+  height: 100%
+  margin: 0px auto -155px
+
+footer, .main .push
+  height: 155px
+
 footer
   background-color: #fff
   padding: 20px 0

app/views/layouts/application.html.slim

@@ -13,5 +13,7 @@ html[lang="en"]
   body
     = render 'layouts/header'
     = render 'shared/flash'
-    .main = content_for?(:content) ? yield(:content) : yield
+    .main
+      = content_for?(:content) ? yield(:content) : yield
+      .push
     = render 'layouts/footer'