Flexbox sticky footer (#2289)

* Remove sticky footer JavaScript

* Use flexbox to force footer to the bottom of every page

* Fix flexbox in Internet Explorer
This commit is contained in:
Michael Rose 2019-10-21 10:41:36 -04:00 committed by GitHub
parent 29263ac102
commit 6d28d12d1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 21 deletions

View file

@ -9,11 +9,6 @@
margin-right: 0; margin-right: 0;
width: 100%; width: 100%;
clear: both; clear: both;
/* sticky footer fix start */
position: absolute;
bottom: 0;
height: auto;
/* sticky footer fix end */
margin-top: 3em; margin-top: 3em;
color: $muted-text-color; color: $muted-text-color;
-webkit-animation: $intro-transition; -webkit-animation: $intro-transition;

View file

@ -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 { .page {
@include breakpoint($large) { @include breakpoint($large) {
float: right; float: right;

View file

@ -3,18 +3,6 @@
========================================================================== */ ========================================================================== */
$(document).ready(function() { $(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 // FitVids init
$("#main").fitVids(); $("#main").fitVids();

File diff suppressed because one or more lines are too long