Make footer sticky

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 6693384a4c170139f92d65253f02b5176b5974ac..015eef484293ca326b85972169d5ee3d0911744a 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -89,3 +89,6 @@ $input-btn-padding-y:         .5rem;
 
 // Buttons
 $btn-border-width:                     3px;
+
+// Footer
+$footer-height:                                22rem;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 2f481da37f89a427955a2f2716bbd5fd1fad6112..89aa7e0a56786bcaaa7201a665d024bfeb3da36a 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -43,11 +43,14 @@
        color: $body-bg;
 }
 
-body {
-       // For scrollspy
+html {
        position: relative;
+       min-height: 100%;
+}
 
+body {
        padding-top: 6rem;
+       margin-bottom: $footer-height;
 }
 
 // Buttons
@@ -101,6 +104,11 @@ body {
 }
 
 footer {
+       position: absolute;
+       bottom: 0;
+       width: 100%;
+       height: $footer-height;
+
        .btn-toolbar .icon {
                height: 2.25rem;
                width: 2.25rem;