From 13ddfd7aa08dad490240bb50964ba5c75e1d3769 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Mon, 15 Oct 2018 14:17:12 +0100 Subject: [PATCH] CSS: Make footer sticky but with variable height Signed-off-by: Michael Tremer --- src/scss/_variables.scss | 3 --- src/scss/style.scss | 14 +++++--------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 0cfe02b8..e075b70a 100644 --- 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 d5969dda..6a5fe07f 100644 --- 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) { -- 2.47.3