core/src/scss/utilities/mixins/layout/_sticky-footer.scss
///
/// Apply this mixin to the `<body>` tag only. It will set the body tag height to
/// 100% and set it to `display: grid`. It will also set whatever element you specify
/// with $selector to css grid's `align-self: flex-end;`. This will keep the footer
/// at the bottom of the page when the content is shorter than the window, but allow
/// the content to push the footer below the viewport when the page is long.
/// Stick the footer to the bottom of the browser window no matter the size of the
/// browser or content.
///
/// @name sticky-footer
///
/// @param {selector} $selector - [> .site-footer] the CSS selector used to target the footer
///
/// @group mixin
@mixin sticky-footer($selector: '> .site-footer') {
@include padding(0);
@include margin(0);
height: 100%;
min-height: 100vh;
display: flex;
flex-basis: 100%;
justify-content: flex-start;
flex-direction: column;
#{$selector} {
margin-top: auto;
}
/// IE 11 needs html to be flex in order to work.
@at-root html {
display: flex;
}
}