Make the Office 365 P1 Plan Footer Stick to the Bottom of the Page

This post is over a year old, some of this information may be out of date.

People that are using the Office 365 P1 Plan they probably already noticed that the footer does not stick at the bottom of the page. But I do not like the empty white space at the bottom, so I thought to fill it up and make the footer stick to the bottom of the page.

Here is how it looks out-of-the-box:

In the past I have already created a sticky footer solution for SharePoint which can be found here.

For the Office 365 layout, you will need to follow the next steps.

Step 1

Open the site in SharePoint Designer 2010.

Step 2

Create a copy of the v4.master page and set it as default and custom master page.

Step 3

Find the s4-workspace DIV and add the following line underneath it:

1
<div class='wrapper'>

Find the closing tag of the s4-workspace DIV, and close the wrapper DIV.

Step 4

Find the DeveloperDashboard control, and add the following line underneath it:

1
<div class='push s4-notdlg'></div>

Step 5

Add the following CSS to the master page or custom stylesheet.

1
body {
2
  overflow: hidden !important;
3
}
4
html.ms-dialog body {
5
  /* Show the vertical scrollbar only when needed in the dialog forms. */
6
  overflow-y: visible;
7
}
8
.wrapper {
9
  min-height: 100%;
10
  height: auto !important;
11
  height: 100%;
12
  /* The bottom margin is the negative value of the footer's height */
13
  margin: 0 auto -30px;
14
  overflow: visible !important;
15
}
16
.ShellFooter, .push {
17
  /* .push must be the same height as .footer */
18
  /* Multicolumn Layout With Sticky Footer */
19
  clear: both;
20
}
21
/* Set the dialog overlay to 100% width and Height. Otherwise the page body will show scrollbars. */
22
.ms-dlgOverlay {
23
  height: 100% !important;
24
  width: 100% !important;
25
}
26
body #s4-workspace { margin-bottom: -30px; }
27

28
/* Orange Footer */
29
body #s4-workspace { background: #D1510F; }
30
#s4-titlerow { position: relative; z-index: 2; }
31
#s4-mainarea { background: #fff; }
32
.divider { z-index: 1; }