fix(css-cookbook): sticky footers not being sticky

Author: BassOfBass

css-cookbook/sticky-footer--download.html

@@ -10,7 +10,14 @@
     <link rel="stylesheet" href="styles.css">
 
     <style>
+
+        html {
+            height:100%;
+            box-sizing: border-box;
+        }
+
         body {
+            height:100%;
             background-color: #fff;
             color: #333;
             font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
@@ -19,12 +26,11 @@
         }
 
         * {
-            box-sizing: border-box;
+            box-sizing: inherit;
         }
 
         section {
-            height: 400px;
-            width: 500px;
+            height: 100%
         }
 
         .wrapper {

css-cookbook/sticky-footer-flexbox--download.html

@@ -10,7 +10,13 @@
 
 
     <style>
+        html {
+            height:100%;
+            box-sizing: border-box;
+        }
+
         body {
+            height: 100%;
             background-color: #fff;
             color: #333;
             font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
@@ -19,7 +25,7 @@
         }
 
         * {
-            box-sizing: border-box;
+            box-sizing: inherit;
         }
 
         .wrapper {

css-cookbook/sticky-footer-flexbox.html

@@ -10,10 +10,19 @@
     <link rel="stylesheet" href="styles.css">
 
     <style>
-        * {
+        html {
+            height:100%;
             box-sizing: border-box;
         }
 
+        * {
+            box-sizing: inherit;
+        }
+
+        body {
+            height: 100%;
+        }
+
         .page-header,
         .page-footer {
             background-color: rgb(75, 70, 74);
@@ -28,7 +37,7 @@
         }
 
         .preview {
-            height: 400px;
+            height: 100%;
             overflow: auto;
         }
     </style>

css-cookbook/sticky-footer.html

@@ -10,10 +10,19 @@
     <link rel="stylesheet" href="styles.css">
 
     <style>
-        * {
+        html {
+            height:100%;
             box-sizing: border-box;
         }
 
+        * {
+            box-sizing: inherit;
+        }
+
+        body {
+            height: 100%;
+        }
+
         .page-header,
         .page-footer {
             background-color: rgb(75, 70, 74);
@@ -26,7 +35,7 @@
         }
 
         .preview {
-            height: 400px;
+            height: 100%;
             overflow: auto;
         }
     </style>