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;
                  }