Sticky Footer

Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Example

Path to CSS file can be found here assets/css/sticky-footer.css, while SCSS file here assets/scss/base/sticky-footer/sticky-footer.scss. Please be advised that the SCSS file is not imported to main SCSS files, because it will break the style of the template.

See, Cover page with an example of a Sticky footer.

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  height: 100%;
  margin-bottom: 72px;
}

.u-sticky-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 72px;
}