diff --git a/includes/headfoot.html b/includes/headfoot.html
index e980372d1855896cd740f9564e6b29ae0d7c9bd2..c42dbab7bfb4bff9d396b38a73d399602fdab5be 100644
--- 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">
diff --git a/js/headfoot.js b/js/headfoot.js
index befd4c61047f298321f4106dacb3dbf07355b965..cf5bd4c3c4b520ea842288a7291feb0e3c5f60c9 100755
--- 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');