From 0c2f42a37ec2721df8261d3eb2f2e49d0629aee1 Mon Sep 17 00:00:00 2001
From: Rosanny <rosanny.sihombing@hft-stuttgart.de>
Date: Wed, 27 May 2020 09:56:50 +0200
Subject: [PATCH] MLAB-229: sticky footer
---
includes/headfoot.html | 23 ++++++++++++++++++++---
js/headfoot.js | 24 +++++++++++++++++++++++-
2 files changed, 43 insertions(+), 4 deletions(-)
diff --git a/includes/headfoot.html b/includes/headfoot.html
index e980372..c42dbab 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 befd4c6..cf5bd4c 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');
--
GitLab