CSS: Make footer sticky but with variable height

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

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 0cfe02b8e353e90c51d22fbfb9f9e1d7858554b3..e075b70af1d8400afdbd9aabc4ab5d008be4332c 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -86,6 +86,3 @@ $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 d5969dda8078a7a8407ea25c099e8d22394ee215..6a5fe07f542602304a0f35dce1600091466fa26f 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -43,13 +43,13 @@
        color: $body-bg;
 }
 
-html {
-       position: relative;
-       min-height: 100%;
+html, body {
+       height: 100%;
 }
 
 body {
-       margin-bottom: $footer-height;
+       display: flex;
+       flex-flow: column;
 }
 
 // Buttons
@@ -98,11 +98,7 @@ body {
 }
 
 footer {
-       position: absolute;
-       bottom: 0;
-       width: 100%;
-       height: $footer-height;
-
+       margin-top: auto;
        padding: 3rem 0 0 0;
 
        @include media-breakpoint-down(md) {