3

I am doing SharePoint UI branding for my company clients. Most of the client would like to keep their footer always on bottom of the page(not sticky). When content is more it is going automatically bottom, but if the content is less, i want to keep the footer on the bottom of the screen. In normal HTML page i can able to achieve this using CSS. But in SharePoint till date i am using javascript to fix this issue.

Is there any way i can resolve this problem using only CSS in SharePoint 2013?

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • Sticky footer means that the footer "sticks" to the bottom of page. I think you mean "not floating". – gm2 Aug 21 '14 at 19:28

2 Answers2

2

Solution for this is essentially the same as adding a sticky footer to a HTML page (as described here), except that it's more difficult to locate the correct positions for the divs in the seattle.master file in SharePoint 2013.

The sticky footer is created by adding 3 sections (wrapper, push, and footer) to the page using div tags. push goes immediately after s4-workspace div (main content area), and wrapper surrounds both main content area and push. footer immediately follows the closing tag of wrapper div.

CSS below is required to format the new divs.

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
  clear: both;
}

A couple of points to note are that footer and push must be same height, and clear property with value of both insures the footer extends across entire page in a multi-column layout.

This is a great write-up specifically about adding a sticky footer in SharePoint 2013.

Community
  • 1
  • 1
gm2
  • 144
  • 1
  • 12
  • If content in wrapper is wider than 100% then footer is not filling all space (after scrolling to the right side, there's blank space over there). It's possible to fix this but you end up with footer not sticked to the bottom when content is short or everything is ok but footer is partially covered by horizontal scrollbar. – Marcin Robaszyński Dec 21 '18 at 17:02
-1

If you have access to the masterpage of the solution you can use CSS to make the footer stick to the bottom of the screen.

1) find the div id="s4-bodyContainer"

2) add a div called id="footer" Your footer content here /div>

3) Add some CSS to make the magic happen:

 #footer {

position: absolute;

bottom: 0;

width: 100%;

background-color: #1C537C;

color: white;

padding-top: 5px;

text-align: center;

min-height: 75px;

}

Look at this site if you want a demo, and look at the source code if you want.

https://amendeonline-public.sharepoint.com/Sider/default-en.aspx

user3607478
  • 11
  • 2