diff --git a/source/css/_partial/footer.styl b/source/css/_partial/footer.styl
index fe2fd246..b973120b 100644
--- a/source/css/_partial/footer.styl
+++ b/source/css/_partial/footer.styl
@@ -1,6 +1,6 @@
 #footer
   background: color-footer-background
-  padding: 50px 0
+  padding: footer-padding 0
   border-top: 1px solid color-border
   color: color-grey
   a
@@ -11,4 +11,4 @@
 
 #footer-info
   line-height: line-height
-  font-size: 0.85em
\ No newline at end of file
+  font-size: 0.85em
diff --git a/source/css/_variables.styl b/source/css/_variables.styl
index 87d3df22..33e4d722 100644
--- a/source/css/_variables.styl
+++ b/source/css/_variables.styl
@@ -46,6 +46,10 @@ article-padding = 20px
 mobile-nav-width = 280px
 main-column = 9
 sidebar-column = 3
+// Footer
+footer-padding = 50px
+// Total size of footer
+footer-height = 2*footer-padding + 38.33px
 
 if sidebar and sidebar isnt bottom
   _sidebar-column = sidebar-column
@@ -60,4 +64,4 @@ columns = main-column + _sidebar-column
 // Media queries
 mq-mobile = "screen and (max-width: 479px)"
 mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)"
-mq-normal = "screen and (min-width: 768px)"
\ No newline at end of file
+mq-normal = "screen and (min-width: 768px)"
diff --git a/source/css/style.styl b/source/css/style.styl
index 961e010a..73dc28e5 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -87,4 +87,8 @@ if sidebar is left
 @import "_partial/mobile"
 
 if sidebar
-  @import "_partial/sidebar"
\ No newline at end of file
+  @import "_partial/sidebar"
+
+// pin the footer to the bottom of the screen even if content is small
+body > div#container > div#wrap > div.outer
+	min-height: s('calc(100vh - %s - %s)',banner-height, footer-height)