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/front/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.

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

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

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