New sticky footer

Author: dymio

assets/screen.css

@@ -1,32 +1,28 @@
 /** STICKY FOOTER **/
 html, body { height: 100%; }
-
 #wrap {
   min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -72px;
-  padding: 0; }
-  #wrap .dilator { height: 72px; }
+  margin-bottom: -72px; }
+  #wrap:after {
+    content: " ";
+    display: block;
+    height: 72px; }
 #footer { height: 72px; background: silver; }
 /** END OF STICKY FOOTER FUNCTIONAL **/
 
 /*
  * Sometimes, first, modern variant don't work because different reasons,
- * but we have less stylish bulletproof
+ * but we have less stylish bulletproof variant with .dilator block
  ** OLD FASHIONED STICKY FOOTER **
+html, body { height: 100%; }
 #wrap {
-  overflow: hidden;
-  position: relative;
   min-height: 100%;
-  height:auto !important;
-  height:100%; }
-#wrap .dilator { padding-bottom: 72px; }
-#footer {
-  overflow: hidden;
-  position: relative;
-  margin-top: -72px;
-  height: 72px; }
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -72px;
+  padding: 0; }
+  #wrap .dilator { height: 72px; }
+#footer { height: 72px; background: silver; }
 /** END OF OLD FASHIONED STICKY FOOTER **/
 
 /* Responsive media rules from Bootstrap 3 */

index.html

@@ -287,7 +287,6 @@ <h1 id="misc">Misc Stuff - abbr, pre, code, sub, sup, etc.</h1>
         <small><a href="#header">[top]</a></small>
       </section>
       <!-- End of Sample Content (thanks to jonhenshaw http://snipplr.com/view/8121/ ) -->
-      <div class="dilator"></div> <!-- part of STICKY FOOTER functional -->
     </div>
     <footer id="footer">
     </footer>