Flexbox sticky footer (mmistakes#2289)

* Remove sticky footer JavaScript * Use flexbox to force footer to the bottom of every page * Fix flexbox in Internet Explorer
twocolumn · Oct 21, 2019 · 47bf58b · 47bf58b
1 parent 5e56a59
commit 47bf58b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 21 deletions.
diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss
@@ -9,11 +9,6 @@
   margin-right: 0;
   width: 100%;
   clear: both;
-  /* sticky footer fix start */
-  position: absolute;
-  bottom: 0;
-  height: auto;
-  /* sticky footer fix end */
   margin-top: 3em;
   color: $muted-text-color;
   -webkit-animation: $intro-transition;

diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
@@ -19,6 +19,22 @@
   }
 }
 
+body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 100vh;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.initial-content,
+.search-content {
+  flex: 1 0 auto;
+}
+
 .page {
   @include breakpoint($large) {
     float: right;

diff --git a/assets/js/_main.js b/assets/js/_main.js
@@ -3,18 +3,6 @@
    ========================================================================== */
 
 $(document).ready(function() {
-  // Sticky footer
-  var bumpIt = function() {
-    $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
-  };
-
-  bumpIt();
-  $(window).resize(
-    jQuery.throttle(250, function() {
-      bumpIt();
-    })
-  );
-
   // FitVids init
   $("#main").fitVids();
 

diff --git a/assets/js/main.min.js b/assets/js/main.min.js