FlexStickyFooterMixin.scss

// https: //css-tricks.com/couple-takes-sticky-footer/
@mixin sticky-footer($master-container, $header-container, $content-container, $footer-container) {
  @at-root {
    html {
      height: 100%;
    }
    #{$master-container} {
      display: flex;
      flex-direction: column;
      height: 100vh;
      /* Avoid the IE 10-11 `min-height` bug. */
    }
    #{$content-container} {
      flex: 1 0 auto;
      /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    }
    #{$header-container},
    #{$footer-container} {
      flex-shrink: 0;
      /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    }
  }
}