Get Started!

Sticky Footer

Creating a footer that will always appear at the bottom of the page even when the page doesn't fill the viewport.

General

A sticky footer is an area that appears at the bottom of a page, notably when isn't sufficient content to fill the view port.

This is different from a footer that is staticly positioned at the bottom of the screen and is always visible regardless of scrolling.

This guide assumes you're using standard Canvas Sections & Controls etc. and not a special handler - that could be created using Canvas.

Basic Concept

The technique is widely used & has been explained a number of times, so this is just a quick overview.

We create wrapper for the main content of the page, this wrapper is set to fill the screen height. Outside of this wrapper, the footer is positioned and by using padding we create the sort after effect.

The HTML

The generated HTML look similar to the following :

<html>
  <body>
    <form>  <!-- asp.net form !-->

      <div id="wrapper"> <!-- Main Content !-->
        ... Page Content ...  
      </div>

      <footer id="footer">  <!-- the footer !-->
        ... Footer Content ...
      </footer>
    </form>
  </body>      
</html>

Note that asp.net uses a <form> to encompass the whole page, this is important as the CSS for making the footer sticky must take this into account.

The CSS

The CSS, be it LessCSS or Sass will look similar to the following :

html, body, body > form {
  position: relative;
  height: 100%;
  display:block;
}

#wrap {
  position:relative;
  height: auto; 
  min-height: 100%;
  padding-bottom: 60px;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

This sets the html, body & form elements to fill the screen, the wrapper (#wrap) has padding applied of 60px and the footer (#footer) is absolutly positioned and has it's height also set to 60px.

The LessCSS I use

Here's the actual CSS I use for a sticky footer, this will work for most Canvas instances, really all that is different are the selectors :

// Sticky Footer
@footer-height:200px;

html, body, body > form {
  position: relative;
  height: 100%;
  display:block;
}


html, body {
  overflow:hidden;

  & > form {
    overflow:auto;
  }
}

form > [data-placeholder="blank"] {
  position:relative;
  height: auto; 
  min-height: 100%;
  padding-bottom: @footer-height + @line-height-computed;
}

footer[role="contentinfo"] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: @footer-height;
}
// End Sticky Footer

You might have noticed that the padding for our wrapper (form > [data-placeholder="blank"]) has the value @line-height-computed added to the main content's padding-bottom. This is to ensure there's always a distinction between the end of the content and the start of the footer. This selector stems from the use of the Blank template. it could just as easily be a class /id.

The variable @line-height-computed is part of Twitter's Bootstrap 3.

The additional html, body selectors :

html, body {
  overflow:hidden;

  & > form {
    overflow:auto;
  }
}

Ensures that the form element scrolls, without it the htm/ body elements scroll. I do this for WebKit & Gecko support because the html element doesn't trigger onscroll event, by making the form scroll you can bind to the onscroll event which does fire.