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/include/scss/base/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.

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