MLAB-229: sticky footer

0c2f42a3 · Rosanny Sihombing · 38cfc0bd · 0c2f42a3 · 0c2f42a3
Commit 0c2f42a3 authored 4 years ago by Rosanny Sihombing
Hide whitespace changes
Inline Side-by-side

Showing

with 43 additions and 4 deletions
+43 -4
--- a/includes/headfoot.html
+++ b/includes/headfoot.html
@@ -12,6 +12,23 @@
        <link rel="stylesheet" href="../fonts/ionicons.min.css">
        <link rel="stylesheet" href="../css/Testimonials.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+        <style>
+            @media only screen and (min-width: 768px) {
+                html {
+                    position: relative;
+                    min-height: 100%;
+                }
+                body {
+                    margin-bottom: 120px; /* Margin bottom by footer height */
+                }
+                #homepage {
+                    position: absolute;
+                    bottom: 0;
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+        </style>
    </head>

    <body>
@@ -124,7 +141,7 @@
            <p> test test test test 123</p>
            <p> test test test test</p>
            <p> test test test test</p>
-            <p> test test test test</p>
+            <!-- p> test test test test</p>
            <hr>
            <p> test test test test</p>
            <p> test test test test</p>
@@ -136,12 +153,12 @@
            <p> test test test test</p>
            <p> test test test test</p>
            <p> test test test test</p>
-            <p> test test test test</p>
+            <p> test test test test</p -->
            <hr>
        </div>

        <!-- footerdiv -->
-        <div id="homepage" class="last clear">
+        <div id="homepage">
            <hr>
            <!-- containerdiv -->
            <div class="container">

--- a/js/headfoot.js
+++ b/js/headfoot.js
@@ -140,9 +140,31 @@ function head() {
 */

 function foot() {
+    // add styles to <head> to manage sticky footer
+    var styles = `
+        @media only screen and (min-width: 768px) {
+            html {
+                position: relative;
+                min-height: 100%;
+            }
+            body {
+                margin-bottom: 120px; /* Margin bottom by footer height */
+            }
+            #homepage {
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+                text-align: center;
+            }
+        }
+    `
+    var styleSheet = document.createElement("style")
+    styleSheet.type = "text/css"
+    styleSheet.innerText = styles
+    document.head.appendChild(styleSheet)
+    
    let footerdiv = document.createElement('div');
    footerdiv.id="homepage";
-    footerdiv.classList.add("last", "clear");
    footerdiv.innerHTML = "<hr>";
    let containerdiv = document.createElement('div');
    containerdiv.classList.add('container');