CSS: Make footer sticky but with variable height

[ipfire.org.git] / src / scss / style.scss

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) {