Sticky Footer Solution for SharePoint 2013

January 23, 2013

Footers and SharePoint that was the starting point of this blog. Back in August 2010, I blogged about how to create a sticky footer for your SharePoint 2010 sites (blog post can be found here and here). Now it is time to upgrade this sticky footer solution to SharePoint 2013.

For this sticky footer solution you will only need to add some HTML and CSS markup to the master page html file.

If you used my solution from 2010, you will see that not much has changed.

  • Open the master page its HTML file in your favorite text editor (in this example I will use the seattle.html file);
  • Do a search for the s4-workspace DIV, and add a new wrapper DIV underneath it;
1
2
<!-- =Wrapper -->
<div class="wrapper">
Wrapper DIV location
Wrapper DIV location
  • Go straight to the bottom of the HTML file and find the last DIV closing tag;
  • Replace the DIV’s closing tag with the following code:
1
2
3
4
5
6
7
8
    <!-- =Push is needed for the footer to be correctly placed on the page. ms-dialogHidden used to hide it in the dialogs. -->
    <div class="push ms-dialogHidden"></div>
  </div>
  <!-- =Footer: ms-dialogHidden used to hide it in the dialogs. -->
  <div class="footer ms-dialogHidden">
    <span>This is my SharePoint 2013 Footer</span>
  </div>
</div>
Footer HTML location
Footer HTML location
  • Save the file

Now that you’ve added your HTML markup to the master page HTML file, we only need to style the footer.

The CSS markup looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* The bottom margin is the negative value of the footer's height */
  margin: 0 auto -30px;
  overflow: visible !important;
}
.footer, .push {
  /* .push must be the same height as .footer */
  height: 30px;
  /* Multicolumn Layout With Sticky Footer */
  clear: both;
}
.footer {
  background: #0072C6;
  color: #fff;
  line-height: 30px;
  text-align: center;
}
body #s4-workspace {
  margin-bottom: -30px;
}

I paced this CSS code for testing purposes in the following location: /_layouts/15/images/tests/footer.css.

The result looks like this:

SharePoint 2013 Footer
SharePoint 2013 Footer
SharePoint 2013 Footer Scrolling
SharePoint 2013 Footer Scrolling

JavaScript Solution

During the writing of this blog post Randy Drisgill posted his solution of adding a Sticky Footer via JavaScript. The blog post can be found here.

Download the files

Comments

comments powered by Disqus