Improved footer.

app/app.css

@@ -148,6 +148,9 @@
   padding: 0;
   font-weight: 300;
 }
+html, body {
+  height: 100%;
+}
 body {
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: 300;
@@ -195,14 +198,16 @@ ul {
   background: #50a3a2;
   background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
   background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-  position: absolute;
   /*top: 20%;*/
-  left: 0;
   width: 100%;
-  height: 100%; /*400px*/
-  /*margin-top: -200px;*/
   overflow-x: hidden;
   overflow-y: auto;
+  /*padding-bottom: 60px;*/
+
+  min-height: 100%;
+  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
+  height: 100%;
+  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
 }
 .landing {
   background: #50a3a2;
@@ -453,13 +458,16 @@ form button:hover {
   color: #fff;
 }
 footer {
-   text-align: center;
-   position:absolute;
-   bottom:0;
-   width:100%;
-   height:60px;   /* Height of the footer */
-   padding: 0;
-   color: white;
+  text-align: center;
+  width: 100%;
+  height: 60px;
+  margin-top: 95px;
+  color: white;
+  background-color: rgba(255,255,255,0.4);
+  padding-top: 5px;
+}
+.push {
+  height: 60px; /* .push must be the same height as .footer */
 }
 footer a{
   color: white;

app/templates/home.html

@@ -13,6 +13,7 @@
             </div>
         {{/if}}
         {{> dashboard}}
-        {{> footer}}
+        <div class="push"></div>
     </div>
+    {{> footer}}
 </template>